Exécuter des extraits de code JavaScript

Kayce Basques

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 DevTools à gauche et du code source d'un extrait dans le volet Sources > Extraits à droite.

Voici le code source de l'extrait qui consignera un message et remplacera 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 Run (Exécuter), le volet de la console s'affiche pour afficher le message Hello, Snippets! que l'extrait journalise, et le contenu de la page change.

Ouvrir le volet "Extraits"

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

1. Accédez à Sources > > extraits.

   

2. Dans le menu Command (Commande) :

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

   

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

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.

3. Attribuez un nom à votre extrait, puis appuyez sur Entrée pour l'enregistrer.

   

Créer un extrait à partir du menu de commande

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 de commande.

3. Commencez à saisir Snippet, sélectionnez Créer un extrait, puis appuyez sur Entrée pour exécuter la commande.

   

Consultez Renommer des extraits si vous souhaitez attribuer un nom personnalisé à votre nouvel extrait.

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.

   

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

   

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

Exécuter des extraits

Comme pour créer un extrait, vous pouvez l'exécuter à la fois dans le volet Extraits et dans le menu des 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écuter dans la barre d'action en bas de l'éditeur, ou appuyez sur Ctrl+Entrée (Windows/Linux) ou Cmd+Entrée (Mac).

   

Exécuter un extrait à 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.

   

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

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.