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. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.

Le mode ligne unique

Pour ce mode se saisie, vous pouvez écrire des expressions JavaScript dans le champ de saisie qui se situe en bas de la console, à droite de >>.

Mode ligne unique, on constate que la zone de saisie se situent en bas, à la fin des message de la Console Web

Pour ajouter des expressions il suffit de les saisir 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 :

Retour de la Console Web avec coloration syntactique

Si votre expression n'a pas l'air d'être complète lorsque Entrée est pressée, alors la console considère qu'il s'agit en fait d'un Maj+Entrée , permettant ainsi de finir l'expression.

Par exemple, si vous tapez :

function toto() {

et que vous appuyiez sur Entrée, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé Maj+Entrée , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.

Le mode éditeur multiligne

Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" Icone passer en mode éditeur multiligne à droite de la zone de saisie du mode ligne unique ou pressez Ctrl+B (Windows/Linux) ou Cmd+B (macOS). L'éditeur multiligne s'ouvre à gauche de la Console Web

Editeur multiligne, avec deux colonnes, à gauche la zone de saisie et à droite la liste des message de la Console Web

À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche Entrée. Pour exécuter le morceau de code que vous avez saisi, cliquez sur le bouton "Exécuter" au dessus de la zone d'édition ou appuyez sur Ctrl+Entrée (ou Cmd+Return sur MacOS).

Vous pouvez ouvrir des fichiers avec le mode éditeur multiligne et sauvegarder dans un fichier le contenu présent dans la zone d'édition :

  • Pour ouvrir un fichier, appuyez sur Ctrl+O (Cmd+O sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner le fichier à ouvrir. 
  • Pour sauvegarder le contenu de la zone d'édition, appuyez sur Ctrl+S (Cmd+S sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner l'emplacement de sauvegarde.

Pour revenir au mode ligne unique, cliquez sur l'icône X au-dessus de la zone d'édition ou appuyez sur Ctrl+B (Windows/Linux) ou Cmd+B (MacOS).

Accéder à 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, Tab, ou Flèche Droite, 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.

Les suggestions d'autocomplétion sont sensibles à la case.

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 :

Console output showing syntax highlighting

Une fois qu'il aura été interprété, le texte entré aura de la coloration syntaxique, de même que le résultat si approprié.

Note: La coloration syntaxique ne sera pas visible dans votre navigateur si certaines fonctionnalités d'Accessibilité sont activées.

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.

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

À partir de Firefox 65, il est possible d'initier une recherche inversée dans l'historique, à l'instar de ce qui est possible dans le bash Linux/Mac ou du PowerShell de Windows.

Sur Windows et Linux, F9 lance la recherche inversée. Sur Mac il s'agit de Ctrl + R

Il faut ensuite entrer le texte recherché dans la ligne de commande en bas de la Console. Lors de la frappe, la première occurrence correspondante sera affichée dans la Console.

Appuyer de nouveau sur F9 (Ctrl + R sous Mac) itère à l'envers parmi les occurrences. Utiliser Maj + F9 (Ctrl + S sur Mac) itère à l'endroit parmi les occurrences. Lorsque la commande cherchée est trouvée, appuyer sur Entrée exécute l'expression.

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.

  • Un sélecteur passé à document.querySelector pour localiser l'iframe.
  • L'élément iframe lui même
  • La fenêtre de contenu de l'iframe
$()
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. Cet helper accepte différent inputs. Il est possible de fournir :
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.