Qu’est-ce qu’un exécuteur JavaScript ?

JavaScript est le langage exécuté par tous les navigateurs web, et la plupart des développeurs testent de petits morceaux de code en les collant dans la console du navigateur. Un exécuteur JavaScript fait la même chose dans une page dédiée. Vous écrivez quelques lignes de code, vous les exécutez, puis vous consultez ce que le code affiche avec console.log. C’est un moyen rapide de vérifier le comportement d’une fonction, d’essayer une idée ou de découvrir ce que renvoie une méthode, sans avoir à configurer un projet.

Description de l’outil

Cet outil exécute votre JavaScript dans votre navigateur et affiche tout ce que le code écrit dans la console. Saisissez ou collez le code à gauche, puis appuyez sur Exécuter ou utilisez Ctrl+Entrée (Cmd+Entrée sur Mac). La sortie apparaît à droite, une ligne pour chaque appel à console, les avertissements et les erreurs étant signalés en couleur. Rien ne s’exécute tant que vous ne le demandez pas, vous pouvez donc modifier le code librement.

Le code s’exécute dans un Web Worker, qui est un thread d’arrière-plan de votre navigateur. Ainsi, un script qui ne se termine jamais ne bloquera pas la page : appuyez sur Arrêter pour y mettre fin. Votre code n’est pas envoyé à un serveur.

Exemples

Afficher un calcul et un objet :

const prices = [4.5, 12, 7.25];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log("Total :", total);
console.log({ count: prices.length, average: total / prices.length });
JavaScript

La sortie est la suivante :

Total : 23.75
{ count: 3, average: 7.916666666666667 }

Attendre la fin d’une opération asynchrone avec await au niveau supérieur :

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Début");
await sleep(1000);
console.log("Une seconde plus tard");
JavaScript

Fonctionnalités

  • Affiche la sortie de console.log, info, debug, warn et error, avec des couleurs pour les avertissements et les erreurs
  • Formate les objets, tableaux, maps, sets, classes, dates et erreurs, et gère les références circulaires
  • Prend en charge les espaces réservés tels que %s, %d, %i, %f, %j et %o dans le premier argument
  • Prend en charge console.group, count, time, assert, dir et clear
  • Exécute le code asynchrone, notamment await au niveau supérieur, les minuteurs et les promesses
  • Signale les erreurs de syntaxe, les erreurs non interceptées et les rejets de promesses non gérés dans la sortie
  • Bouton Arrêter qui met immédiatement fin à un script, même s’il est bloqué dans une boucle infinie
  • L’option Conserver les journaux, activée par défaut, conserve la sortie des exécutions précédentes afin de vous permettre de comparer les résultats
  • Survolez une ligne de la sortie pour voir la date et l’heure auxquelles elle a été enregistrée
  • Copiez toute la sortie, effacez-la avec le bouton Effacer ou téléchargez votre code sous forme de fichier

Fonctionnement

Lorsque vous appuyez sur Exécuter, l’outil démarre un nouveau Web Worker et lui envoie votre code. Dans le worker, les méthodes de console sont remplacées : chaque appel est donc converti en texte et renvoyé à la page. Votre code est encapsulé dans une fonction asynchrone, ce qui permet d’utiliser await au niveau supérieur.

La barre d’état située sous la sortie affiche En cours d’exécution pendant l’exécution de votre code ou tant qu’un minuteur que vous avez démarré est en attente. Un setInterval maintient l’exécution jusqu’à ce que vous l’effaciez ou que vous appuyiez sur Arrêter. Chaque exécution démarre avec un worker vierge, de sorte que les variables d’une exécution précédente ne sont jamais conservées. La sortie est conservée entre les exécutions lorsque l’option Conserver les journaux est cochée. Décochez cette option pour commencer chaque exécution avec une sortie vide, ou appuyez sur Effacer pour la vider à tout moment.

Conseils

  • Utilisez console.log plutôt qu’une expression finale : la valeur de la dernière ligne n’est pas affichée, donc 1 + 2 seul n’affiche rien
  • Un worker ne possède pas de page ; document, window et les autres objets du DOM ne sont donc pas disponibles. Utilisez self pour accéder à la portée globale
  • Les instructions import statiques ne fonctionnent pas dans ce type de code
  • La sortie conserve les 1 000 lignes les plus récentes, et une ligne unique est tronquée après 10 000 caractères
  • Les requêtes effectuées avec fetch sont envoyées depuis votre navigateur comme les autres et sont soumises aux règles habituelles d’origine croisée
  • N’exécutez que du code auquel vous faites confiance, comme vous le feriez dans la console du navigateur