Console JavaScript

La Console du navigateur est au navigateur entier ce qu'est la Console Web à une page web.

Elle logue le même type d'information de la Console Web : Requêtes réseaux, JavaScript, CSS, erreurs et avertissement de sécurité, messages logués par du code JavaScript. Cependant, au lieu de loguer cette information pour un seul onglet, la console logue l"information de tout les onglets courants, de tout les modules complémentaires et du propre code du navigateur.

Si vous voulez également utiliser les autres outils de développement de la Boite à outils Web sur les modules complémentaires ou le code du navigateur, vous pouvez utiliser la Boite à outils du navigateur.

Comme la Console Web, la Console du navigateur peut exécuter des expressions JavaScript. Cependant, contrairement à la Console Web qui exécute le code dans le contexte de la page, la Console du navigateur, elle, l'exécute dans le contexte de la fenêtre du navigateur. Cela veut dire que vous pouvez interagir avec chaque onglet du navigateur, en utilisant la variable globale gBrowser. Il est même possible d’interagir avec le XUL utilisé pour spécifier l'interface utilisateur du navigateur.

Ouvrir la Console du navigateur

Il est possible d'ouvrir la Console du navigateur de deux façons différentes :

1. Depuis le menu Firefox : Il faut sélectionner "Console du navigateur" dans le menu "'Développement" (sous OS X, le menu "Développement" est un sous menu du menu "Outils")
2. Utiliser le raccourci clavier : Ctrl+Maj+J sur Windows et Cmd+Maj+J sur Mac.

Il est à noter que depuis Firefox 38, si la Console de navigateur est cachée par une autre fenêtre de Firefox, et que vous utiliser de nouveau une des méthodes ci-dessus, elle sera mise au premier plan. Dans les versions antérieures à Firefox 38, cette manipulation ferme la Console ce qui est moins pratique.

Alternativement, il est possible de l’ancrer la Console du navigateur en laçant Firefox en ligne de commande avec l'argument -jsconsole :

/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

La Console du navigateur ressemble a ceci :

Comme vous pouvez le constater, la Console du navigateur ressemble et se comporte comme la Console Web :

• La plupart de la fenêtre est occupé par un panneau d'affichage
• Une barre d'outils se trouve en haut et permet de filtrer les messages qui apparaissent.
• Un interpréteur de ligne de commande en bas, permet d'évaluer des expressions JavaScript.

Messages de la Console du navigateur

La Console du navigateur affiche le même type de messages que la Console Web. Elle affiche donc :

• Les requêtes HTTP
• Les avertissements et erreurs (incluant le JavaScript, le CSS, les avertissement et erreurs de sécurité, et les messages affiché par du code JavaScript utilisant l'API console)
• Les messages d'entrée/sortie : les commandes envoyés au navigateur via ligne de de commande, et les résultats de l’exécution ces commandes.

Cependant, la Console du Navigateur affiche les messages venant du :

• Contenu web contenu dans tout les onglets du navigateur
• Code du navigateur
• Contenu des modules complémentaires.

Messages des modules complémentaires

La Console du navigateur affiche les messages envoyés par chaque module complémentaire de Firefox.

Console.jsm

Pour utiliser l'API console depuis un modèle complémentaire traditionnel, il faut l'obtenir grâce au module "Console".

Un mot réservé importé par Console.jsm est "console". L'exemple ci-dessous accède au module puis ajoute un message dans la Console du navigateur :

Components.utils.import("resource://gre/modules/devtools/Console.jsm");
console.log("Meilleurs voeux depuis le code Firefox"); //affiche le message dans la Console du navigateur

Pour en savoir plus :

• Documentation de l'API console
• Le code source de Console.jsm dans the Mozilla Cross-Reference

HUDService

HUDService permet également d'accéder à la Console du navigateur. Ce module est disponible dans Mozilla Cross-Reference. Ce module permet non seulement d’accéder à la Console du navigateur mais également à la Console Web.

Voici un exemple qui explique comment effacer le contenu de la Console du navigateur :

Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
var HUDService = devtools.require("devtools/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();
hud.jsterm.clearOutput(true);

Il est possible d'accéder au contexte du document de la Console du navigateur avec HUDService. L'exemple ci-dessous efface la contenu de la Console du navigateur quand l'utilisateur survole le bouton "Clear" :

Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
var HUDService = devtools.require("devtools/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();

var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button'); // accès au contexte
clearBtn.addEventListener('mouseover', function() {
  hud.jsterm.clearOutput(true);
}, false);

Fonctionnalités bonus disponibles

Pour les modules complémentaire utilisant le Add-on SDK, l'API console est disponible automatiquement. Voici un exemple de module complémentaire qui affiche une erreur quand l'utilisateur clique sur un widget :

widget = require("sdk/widget").Widget({
  id: "an-error-happened",
  label: "Error!",
  width: 40,
  content: "Error!",
  onClick: logError
});

function logError() {
  console.error("something went wrong!");
}

Compiler ceci en tant que fichier XPI, puis ouvrir la Console du navigateur, puis ouvir le fichier XPI dans Firefox et l'installer fera apparaître un widget nommé "Error!" dans la barre des modules complémentaires :

Cliquer sur l’icône affichera ce message dans la console :

Les messages des modules complémentaires basés sur le Add-on SDK sont préfixés par le nom du module complémentaire (ici "log-error"), rendant ainsi la recherche de ces messages facile grâce à la boite de filtrage. Par défaut, seuls les messages d’erreur sont affichés dans la console. Il est cependant possible de changer cela dans préférences du navigateur.

Ligne de commande de la Console du navigateur

Comme la Console Web, l'interpréteur de ligne de commande permet d'évaluer des expressions JavaScript en temps réel :Comme la Console Web, elle supporte également l'auto-complétion, l'historique, de nombreux raccourcis claviers et des fonctions d'aide. Si le résultat d'une commande est un objet, Il est possible de cliquer dessus pour voir ses détails.

Alors que la Console Web exécute le code dans le contexte de la page à laquelle elle est rattachée, la Console du navigateur elle exécute le code dans la contexte du navigateur. Il est possible de vérifier cela en évaluant l'objet window :

Cela signifie qu'il est possible de contrôler le navigateur, il est ainsi possible de : ouvrir et fermer onglets et fenêtres, changer leur contenu et modifier l'interface utilisateur en créant, modifiant ou supprimant des éléments XUL.

Contrôler le navigateur

L'interpréteur de ligne de commande a accès à l'objet tabbrowser a travers la variable globale gBrowser. Cela permet de contrôler le navigateur via ligne de commande. Entrer ce code dans la ligne de commande de la Console du navigateur modifiera l’onglet ouvert puis redirigera automatiquement vers le site de Mozilla (bon à savoir, pour sauter une ligne dans l'interpréteur, utilisez le Maj+Entrée) :

var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load", function() {
  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
}, true);
newTabBrowser.contentDocument.location.href = "https://mozilla.org/";

Modifier l'interface utilisateur du navigateur

Étant donné que l’objet window correspond au chrome du navigateur, il est possible de modifier l'interface utilisateur du navigateur. Sur Windows, le code suivant ajoutera un nouvel objet au menu principal du navigateur. (Attention, ce code ne marche pas dans les versions récentes de Firefox) :

var parent = window.document.getElementById("appmenuPrimaryPane");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);

Sur OS X, ce code ajoutera un objt au menu "Tools" :

var parent = window.document.getElementById("menu_ToolsPopup");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);