Interpreteur de ligne de commande

Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la Console web.

Entrer des expressions

Pour entrer des expressions il suffit de les taper dans la ligne de commande et d'appuyer sur Entrée. Pour sauter des lignes et ainsi pouvoir entrer des expressions multiligne, il suffit d'utiliser MajEntrée au lieu de Entrée.

L'expression entrée s'affiche alors dans la fenêtre d'affichage de message, et est suivie par son résultat :

Acceder à des variables

Il est possible d'accéder à des variables définies dans la page, par exemple des variables préconstruites comme window et des variables ajoutées par du code JavaScript comme jQuery :

Autocomplétion

La ligne de commande possède de l'autocomplétion : il suffit d'entrer quelques lettres et une pop-up apparait avec les complétions possibles (s’il y en a) :

Appuyer sur Entrée ou Tab acceptera la suggestion sélectionnée. Pour changer de sélection, il faut utiliser les flèches haut/bas ou continuer à taper pour affiner les suggestions.

La console suggère des complétions depuis le scope qui s'exécute actuellement dans la stack frame. Cela signifie que si la console s'est arrêtée sur un point d'arrêt, l'autocomplétion suggérera des objets de la fonction locale.

Les suggestions fonctionnent pour les tableaux également :

Définir des variables

Il est possible de définir ses propres variables et d'y accéder par la suite :

Historique de commandes

La ligne de commande se souvient des commandes qui ont été entrées : pour naviguer dans l'historique, il faut utiliser les flèches haut/bas.

Depuis Firefox 39, cet historique persiste entre les sessions. Pour nettoyer l'historique, il faut utiliser fonction d'aide clearHistory().

Travailler avec des iframes

Si une page contient des iframes, il est possible d'utiliser la commande cd() pour changer le scope de la console vers celui d'une iframe spécifique. Il est alors possible d'exécuter des fonctions définies dans le document hosté par cette iframe. Il y a trois façons d'accéder à une iframe en utilisant cd():

Il est possible de passer l'élément DOM de l'iframe :

var frame = document.getElementById("frame1");
cd(frame);

Il est possible de passer un sélecteur CSS qui correspond à l'iframe :

cd("#frame1");

Il est possible de passer l'objet global window de l'iframe :

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

Pour revenir au contexte de la fenêtre principale, il suffit d'appeler cd() sans paramètres :

cd();

Par exemple, supposons que nous avons un document qui inclut une iframe :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

Cette iframe définit une nouvelle fonction :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function whoAreYou() {
        return "I'm frame1";
      }
   </script>
  </head>
  <body>
  </body>
</html>

Il est possible de changer de contexte comme ceci :

cd("#frame1");

Le document de l'objet global window est maintenant celui de l'iframe :

Et il est alors possible d'appeler la fonction définie dans l'iframe :

Commandes d'aide

La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simples.

$(): Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à document.querySelector(), ou appelle la fonction $ de la page, si elle existe.
$$(): Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de document.querySelectorAll(); Depuis Firefox 41, cette méthode n'est plus un raccourci pour document.querySelectorAll() et à la place retourne un tableau d'éléments.
$0: L'élément actuellement inspecté sur la page.
$_: Nouveau dans Firefox 39. Stocke le résultat de la dernière expression exécutée dans la ligne de commande de la console. Par exemple, taper 2+2 puis entrée et ensuite $_ puis entrée, la console affichera 4.
$x(): Evalue une expression XPath et renvoie un tableau des nœuds correspondant.
keys(): À partir d'un objet, retourne une liste de ses clefs (keys, ou nom de propriété) . C'est un raccourci de Object.keys.
values(): À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec keys().
clear(): Vide l'affichage des messages de la console.
inspect(): À partir d'un objet, ouvre un inspecteur d'objet.
pprint(): Formate la valeur fournie sous une forme lisible (pretty-print) ; utile pour afficher le contenu d'objets ou de tableaux.
help(): Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.
cd(): Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Voir travailler avec des iframes.
copy(): Nouveau dans Firefox 38. Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quel. Sinon la méthode JSON.stringify sera appelée sur l'argument et le résultat sera copié dans le presse-papier.
clearHistory(): Nouveau dans Firefox 39. Exactement comme une ligne de commande normale, la ligne de commande de la console se souvient des commandes tapées.
Référez-vous à l'API Console pour plus d'informations sur comment journaliser depuis le contenu.