Exécuter JavaScript dans la console

Vous pouvez entrer n’importe quelle expression, instruction ou extrait de code JavaScript dans la console, qui s’exécute immédiatement et de manière interactive au fur et à mesure que vous tapez. Cela est possible, car l’outil Console dans DevTools est un environnement REPL (Read-eval-print loop).

La console :

1. Lit le Code JavaScript que vous tapez.
2. Évalue votre code.
3. Imprime le résultat de votre expression.
4. Effectue une boucle jusqu’à la première étape.

Pour entrer des instructions et des expressions JavaScript de manière interactive dans la console :

1. Cliquez avec le bouton droit dans une page web, puis sélectionnez Inspecter. DevTools s’ouvre. Vous pouvez également appuyer sur Ctrl+Maj+J (Windows, Linux) ou Cmd+Option+J (macOS) pour ouvrir directement la console DevTools.

2. Si nécessaire, cliquez sur DevTools pour lui donner le focus, puis appuyez sur Échap pour ouvrir la console.

3. Cliquez sur la console, puis tapez 2+2, sans appuyer sur Entrée.

   La console affiche immédiatement le résultat 4 sur la ligne suivante pendant que vous tapez. La Eager evaluation fonctionnalité vous permet d’écrire du code JavaScript valide. La console affiche le résultat lorsque vous tapez, que votre code JavaScript soit correct ou non et qu’il existe ou non un résultat valide.

   

4. Lorsque vous appuyez sur Entrée, la console exécute la commande JavaScript (expression ou instruction), affiche le résultat, puis déplace le curseur vers le bas pour vous permettre d’entrer la commande JavaScript suivante.

   

Autocomplétion pour écrire des expressions complexes

La console vous permet d’écrire des scripts JavaScript complexes à l’aide de la saisie automatique. Cette fonctionnalité est un excellent moyen d’en savoir plus sur les méthodes JavaScript que vous ne connaissiez pas auparavant.

Pour essayer la saisie automatique lors de l’écriture d’expressions en plusieurs parties :

1. Tapez doc.

2. Appuyez sur les touches de direction pour mettre en surbrillance document le menu déroulant.

3. Appuyez sur Tab pour sélectionner document.

4. Tapez .bo.

5. Appuyez sur Tab pour sélectionner document.body.

6. Tapez une autre . pour obtenir une grande liste des propriétés et méthodes possibles disponibles dans le corps de la page web actuelle.

   

Historique de la console

Comme pour de nombreux autres environnements de ligne de commande, un historique des commandes que vous avez entrées peut être réutilisé. Appuyez sur Flèche haut pour afficher les commandes que vous avez entrées précédemment.

De même, l’autocomplétion conserve un historique des commandes que vous avez tapées précédemment. Vous pouvez taper les premières lettres des commandes précédentes, et vos choix précédents s’affichent dans une zone de texte.

En outre, la console offre également un certain nombre de méthodes utilitaires qui vous facilitent la vie. Par exemple, $_ contient toujours le résultat de la dernière expression que vous avez exécutée dans la console. Consultez Fonctions et sélecteurs de l’utilitaire de l’outil console.

Modifications multilignes

Par défaut, la console ne vous donne qu’une seule ligne pour écrire votre expression JavaScript. Le code s’exécute lorsque vous appuyez sur Entrée. Pour contourner la limitation à 1 ligne, appuyez sur Maj+Entrée au lieu de Entrée.

Dans l’exemple suivant, la valeur affichée est le résultat de toutes les lignes (instructions) exécutées dans l’ordre :

Si vous démarrez une instruction multiligne dans la console, le bloc de code est automatiquement reconnu et mis en retrait. Par exemple, si vous démarrez une instruction block, en entrant une accolades, la ligne suivante est automatiquement mise en retrait :

Autoriser le collage dans la console

Lorsque vous essayez pour la première fois de coller du contenu dans l’outil Console , au lieu de le coller, un message s’affiche : « Avertissement : Ne collez pas dans la console DevTools du code que vous ne comprenez pas ou que vous n’avez pas vérifié vous-même. Cela peut permettre aux attaquants de voler votre identité ou de prendre le contrôle de votre ordinateur. Tapez « Autoriser le collage » ci-dessous, puis appuyez sur Entrée pour autoriser le collage. »

Cet avertissement permet d’empêcher les attaques par script intersites (auto-XSS) sur les utilisateurs finaux. Pour coller du code, commencez par taper Autoriser le collage dans la console, puis appuyez sur Entrée. Collez ensuite le contenu. Vous pouvez également démarrer Edge avec l’indicateur ci-dessous.

Le collage dans l’éditeur d’extraits de code de l’outil Sources est similaire ; Consultez Autoriser le collage dans l’éditeur d’extraits de code dans Exécuter des extraits de code JavaScript sur n’importe quelle page web.

Désactiver les avertissements XSS autonomes en démarrant Edge avec un indicateur de ligne de commande

Pour éviter les avertissements ci-dessus et autoriser immédiatement le collage dans l’outil Console et l’éditeur d’extrait de code de l’outil Sources , par exemple pour les tests automatisés, démarrez Microsoft Edge à partir de la ligne de commande, à l’aide de l’indicateur suivant : --unsafely-disable-devtools-self-xss-warnings. L’indicateur s’applique à une seule session de Microsoft Edge.

Par exemple, sur Windows :

Edge Stable :

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Version bêta d’Edge :

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Dev :

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Canary :

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Requêtes réseau utilisant await() de niveau supérieur

En dehors de vos propres scripts, la console prend en charge le niveau supérieur await pour y exécuter du code JavaScript asynchrone arbitraire. Par exemple, utilisez l’API fetch sans encapsuler l’instruction await avec une fonction asynchrone.

Pour obtenir les 50 derniers problèmes qui ont été enregistrés sur les outils de développement Microsoft Edge pour Visual Studio Code dépôt GitHub :

1. Dans DevTools, ouvrez la console.

2. Copiez et collez l’extrait de code suivant pour obtenir un objet qui contient 10 entrées :

   await ( await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json();
   

   

   Les 10 entrées sont difficiles à reconnaître, car beaucoup d’informations sont affichées.

3. Si vous le souhaitez, utilisez la console.table() méthode log pour recevoir uniquement les informations qui vous intéressent :

   

   Pour réutiliser les données retournées à partir d’une expression, utilisez la copy() méthode utilitaire de la console.

4. Collez le code suivant. Il envoie la requête et copie les données de la réponse dans le Presse-papiers :

   copy(await (await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json())
   

La console est un excellent moyen de pratiquer JavaScript et d’effectuer des calculs rapides. Le vrai pouvoir est le fait que vous avez accès à l’objet window . Consultez Interagir avec le DOM à l’aide de la console.

Voir aussi

• Interagir avec le DOM à l’aide de la console
• Fonctions et sélecteurs de l’utilitaire d’outil de console

GitHub :

• Proposition ECMAScript : Niveau supérieur await
• Outils de développement Microsoft Edge pour Visual Studio Code

MDN :

• Objet Window .

Wikipédia:

• Read–eval–print loop (REPL)