Créer et exécuter un fichier JavaScript dans Chrome

Pour exécuter du JavaScript dans Chrome, utilisez un Snippet DevTools pour faire un essai rapide dans la page ouverte, ou enregistrez le code dans un fichier .js et chargez-le depuis une page Web locale. Node.js exécute le JavaScript en dehors du navigateur ; Express peut servir une page qui charge votre fichier, que Chrome exécute ensuite comme code côté navigateur.

Créer et exécuter un fichier JavaScript dans Chrome avec les outils de développement Chrome

Ouvrez une page dans Chrome, puis les outils de développement avec F12, ou faites un clic droit sur la page et choisissez Inspect. Sélectionnez le panneau Sources, puis Snippets. Selon la version ou la langue de Chrome, le nom du panneau ou son emplacement peut varier ; si Snippets n’est pas visible, consultez le menu de débordement du panneau. Choisissez New snippet, donnez-lui un nom et saisissez du JavaScript.

Ce Snippet utilise le document de la page ouverte. Il y ajoute un titre et affiche un message dans la console des outils de développement :

if (typeof document !== 'undefined') {
  const heading = document.createElement('h1');
  heading.textContent = "This is the current webpage";
  document.body.prepend(heading);
}
console.log('Snippet finished');

La sortie d’exécution consignée indique « Snippet finished » et un code de sortie de 0. Le libellé « Snippet finished » reste en anglais dans l’exemple conservé à l’identique :

Snippet finished

Exécutez le Snippet avec Ctrl+Enter sous Windows ou Linux, ou avec Command+Enter sous macOS. Le titre apparaît en haut de la page ouverte et le message s’affiche dans la console. Un Snippet permet d’essayer du code sur cette page, mais ce n’est pas un fichier de projet que vous pouvez organiser et exécuter indépendamment. Chrome peut conserver les Snippets d’une session à l’autre : fermer le navigateur ne garantit donc pas leur suppression. Pour garder une copie durable du code de votre projet, enregistrez-le dans un fichier source distinct.

Exécuter un fichier JavaScript dans Chrome avec Node.js et Express

Node.js exécute le code dans l’environnement Node ; il n’exécute pas le code du navigateur dans Chrome. Pour afficher dans Chrome un script enregistré, servez une page qui le charge. Installez Node.js depuis le site officiel de Node.js, créez un répertoire de projet, ouvrez-y un terminal et exécutez npm init -y, puis npm install express.

Créez un sous-répertoire public. Enregistrez le contenu suivant sous public/index.html ; cette page charge le script du navigateur depuis ce même répertoire :

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Local JavaScript example</title></head>
<body>
  <script src="/app.js"></script>
</body>
</html>

Enregistrez l’exemple JavaScript ci-dessus sous public/app.js. Dans le répertoire du projet, créez server.js avec cette configuration Express : const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.listen(4000);. Cette configuration propre à Express est décrite ici, mais elle n’a pas été exécutée dans les éléments d’exécution fournis. Depuis le répertoire du projet, démarrez le serveur avec node server.js, puis ouvrez http://localhost:4000/ dans Chrome. Le navigateur charge app.js, qui ajoute le titre et consigne le message. Pour le voir, ouvrez les outils de développement et sélectionnez la console de cette page. Le terminal exécute server.js ; il n’exécute pas app.js comme code de navigateur. Le port 4000 n’est qu’un exemple : s’il est déjà utilisé, choisissez un port disponible et indiquez-le à la fois dans app.listen(...) et dans l’URL.