--- title: Interpreteur de ligne de commande slug: Tools/Web_Console/The_command_line_interpreter translation_of: Tools/Web_Console/The_command_line_interpreter original_slug: Outils/Console_Web/The_command_line_interpreter ---
{{ToolsSidebar}}

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 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

{{ page("/fr/docs/Outils/Console_Web/Fonctions_d_aide", "Les commandes") }}