Exécuter des extraits de code JavaScript

Sofia Emelianova
Sofia Emelianova

Si vous exécutez régulièrement le même code dans la console, envisagez plutôt d'enregistrer le code en tant qu'extrait. Les extraits ont accès au contexte JavaScript de la page. Ils constituent une alternative aux bookmarklets.

Vous pouvez créer des extraits dans le panneau "Sources" et les exécuter sur n'importe quelle page et en mode navigation privée.

Par exemple, la capture d'écran ci-dessous montre la page d'accueil de la documentation des outils de développement à gauche, ainsi que des extraits de code source dans le volet Sources > Extraits à droite.

Page d'accueil de la documentation DevTools avant l'exécution de l'extrait. Le bouton "Run" (Exécuter) est mis en surbrillance.

Voici l'extrait de code source qui enregistre certains messages et remplace le corps HTML de la page d'accueil par un élément <p> contenant le message:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Lorsque vous cliquez sur le bouton Exécuter Exécutez-le., le panneau Console s'ouvre et affiche le message Hello, Snippets! enregistré par l'extrait ainsi que le contenu de la page.

La page d&#39;accueil après l&#39;exécution de l&#39;extrait

Ouvrir le volet "Extraits"

Le volet Extraits liste vos extraits. Pour modifier un extrait, ouvrez-le de deux manières :

  1. Accédez à Sources > Plus d&#39;onglets. > extraits.

    Menu &quot;Plus d&#39;onglets&quot; du volet &quot;Sources&quot;.

  2. Dans le menu Command:

    1. Appuyez sur Ctrl+Maj+P (Windows/Linux) ou Cmd+Maj+P (Mac) pour ouvrir le menu de commandes.
    2. Commencez à saisir Snippets, sélectionnez Afficher les extraits, puis appuyez sur Entrée.

    Sélection de l&#39;option &quot;Afficher les extraits&quot; dans le menu de commandes.

Le volet Sources>Extraits affiche la liste des extraits que vous avez enregistrés (vide dans cet exemple).

Volet &quot;Extraits&quot; vide.

Créer des extraits

Vous pouvez créer des extraits dans le volet Extraits ou en exécutant la commande correspondante à partir du menu de commande n'importe où dans DevTools.

Le volet Extraits trie vos extraits par ordre alphabétique.

Créer un extrait dans le panneau "Sources"

  1. Ouvrez le volet Extraits.
  2. Cliquez sur Nouvel extrait. Nouvel extrait.
  3. Attribuez un nom à votre extrait, puis appuyez sur Entrée pour l'enregistrer.

    Nommer un extrait

Créer un extrait à partir du menu de commandes

  1. Placez le curseur n'importe où dans DevTools.
  2. Appuyez sur Ctrl+Maj+P (Windows/Linux) ou Cmd+Maj+P (Mac) pour ouvrir le menu Commande.
  3. Commencez à saisir Snippet, sélectionnez Create new snippet (Créer un extrait), puis appuyez sur Entrée pour exécuter la commande.

    Sélectionnez &quot;Créer un extrait&quot; dans le menu des commandes.

Si vous souhaitez personnaliser le nom de votre nouvel extrait, consultez Renommer les extraits.

Modifier des extraits

  1. Ouvrez le volet Extraits.
  2. Dans le volet Extraits, cliquez sur le nom de l'extrait que vous souhaitez modifier. Le panneau Sources l'ouvre dans l'éditeur de code.

    Extrait de code ouvert dans l&#39;éditeur de code.

  3. Utilisez l'éditeur de code pour modifier le code de votre extrait. La présence d'un astérisque à côté du nom de l'extrait signifie que vous n'avez pas encore enregistré vos modifications.

    Un astérisque à côté du nom de l&#39;extrait indique que le code n&#39;a pas été enregistré.

  4. Appuyez sur Ctrl+S (Windows/Linux) ou Cmd+S (Mac) pour enregistrer.

Exécuter des extraits

Comme pour la création d'un extrait de code, vous pouvez l'exécuter dans le volet Extraits et le menu de commandes.

Exécuter un extrait dans le panneau "Sources"

  1. Ouvrez le volet Extraits.
  2. Cliquez sur le nom de l'extrait de code que vous souhaitez exécuter. Le panneau Sources l'ouvre dans l'éditeur de code.
  3. Cliquez sur Exécutez-le. Exécuter dans la barre d'action en bas de l'éditeur, ou appuyez sur Ctrl+Entrée (Windows/Linux) ou Cmd+Entrée (Mac).

    Bouton &quot;Exécuter&quot;

Exécuter un extrait de code à partir du menu de commande

  1. Placez le curseur n'importe où dans DevTools.
  2. Appuyez sur Ctrl+O (Windows/Linux) ou Cmd+O (Mac) pour ouvrir le menu de commande.
  3. Saisissez le caractère !, suivi du nom de l'extrait de code que vous souhaitez exécuter.

    Exécution d&#39;un extrait à partir du menu &quot;Ouvrir&quot;.

  4. Appuyez sur Entrée pour exécuter l'extrait de code.

Renommer des extraits

  1. Ouvrez le volet Extraits.
  2. Effectuez un clic droit sur le nom de l'extrait, puis sélectionnez Rename (Renommer).

Supprimer des extraits

  1. Ouvrez le volet Extraits.
  2. Effectuez un clic droit sur le nom de l'extrait, puis sélectionnez Supprimer.