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.
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 , le panneau Console s'ouvre et affiche le message Hello, Snippets!
enregistré par l'extrait ainsi que le contenu de la page.
Ouvrir le volet "Extraits"
Le volet Extraits liste vos extraits. Pour modifier un extrait, ouvrez-le de deux manières :
Accédez à Sources > > extraits.
Dans le menu Command:
- Appuyez sur Ctrl+Maj+P (Windows/Linux) ou Cmd+Maj+P (Mac) pour ouvrir le menu de commandes.
- 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"
- Ouvrez le volet Extraits.
- Cliquez sur Nouvel extrait.
Attribuez un nom à votre extrait, puis appuyez sur Entrée pour l'enregistrer.
Créer un extrait à partir du menu de commandes
- Placez le curseur n'importe où dans DevTools.
- Appuyez sur Ctrl+Maj+P (Windows/Linux) ou Cmd+Maj+P (Mac) pour ouvrir le menu Commande.
Commencez à saisir
Snippet
, sélectionnez Create new snippet (Créer un extrait), puis appuyez sur Entrée pour exécuter la commande.
Si vous souhaitez personnaliser le nom de votre nouvel extrait, consultez Renommer les extraits.
Modifier des extraits
- Ouvrez le volet Extraits.
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.
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.
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"
- Ouvrez le volet Extraits.
- Cliquez sur le nom de l'extrait de code que vous souhaitez exécuter. Le panneau Sources l'ouvre dans l'éditeur de code.
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 de code à partir du menu de commande
- Placez le curseur n'importe où dans DevTools.
- Appuyez sur Ctrl+O (Windows/Linux) ou Cmd+O (Mac) pour ouvrir le menu de commande.
Saisissez le caractère
!
, suivi du nom de l'extrait de code que vous souhaitez exécuter.Appuyez sur Entrée pour exécuter l'extrait de code.
Renommer des extraits
- Ouvrez le volet Extraits.
- Effectuez un clic droit sur le nom de l'extrait, puis sélectionnez Rename (Renommer).
Supprimer des extraits
- Ouvrez le volet Extraits.
- Effectuez un clic droit sur le nom de l'extrait, puis sélectionnez Supprimer.