web-dev-qa-db-fra.com

Chrome Outils de développement: qu'est-ce que la prise en charge des extraits de code?

Depuis la version 19, Chrome Web Inspector dispose d'une fonctionnalité expérimentale appelée "prise en charge des extraits de code". Voici comment l'activer:

  1. Ouvrez Chrome: flags, activez "Developer Tools experiences", redémarrez.

  2. Ouvrez Web Inspector (Developer Tools), appuyez sur l'icône d'engrenage de paramètres dans le coin inférieur droit, activez "Snippets support", redémarrez.

    enable snippets support

  3. Ouvrez le panneau Scripts, cliquez sur l'icône "arborescence du navigateur" à gauche et recherchez un onglet Snippets vide.

    snippets tab

Ma question est: À quoi puis-je l'utiliser? Comment puis-je remplir cela avec des extraits?

javascriptgoogle-chrome-devtoolsweb-inspector
76
Jo Liss

En bref, les extraits de code sont une console multi-lignes, un flux de travail de développement JS itératif et un magasin persistant pour les aides de débogage courantes.

developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

Voici quelques exemples d'utilisation des extraits de code:

  • Bookmarklets - tous vos bookmarklets peuvent être stockés sous forme d'extraits, en particulier ceux que vous souhaitez modifier.
  • Utilitaires - des assistants de débogage pour interagir avec la page en cours peuvent être stockés et débogués. Une liste organisée par la communauté de ces utilitaires est disponible.
  • Débogage - Les extraits de code offrent une console multi-lignes avec mise en évidence de la syntaxe et persistance, ce qui facilite le débogage du code qui est plus qu'une ligne unique.
  • Code de patch de singe - le code que vous souhaitez patcher au moment de l'exécution peut être fait via des extraits de code, bien que de nombreuses fois vous pouvez simplement modifier le code en direct dans l'onglet Sources .

snippets screenshot

Enfin, j'ai personnellement collecté quelques extraits courants que vous pouvez inclure dans votre arsenal: github.com/paulirish/devtools-addons/wiki/Snippets

Pour exécuter des extraits rapidement, vous pouvez maintenant le faire. Ctrl-Shift-P pour la "palette de commandes", puis retour arrière, et utilisez un! préfixe, puis saisissez le nom de l'extrait à exécuter.

enter image description here

84
Paul Irish

J'ai demandé à Paul Irish s'il savait quoi que ce soit à ce sujet, il n'était pas sûr non plus mais dit qu'il n'est pas encore complètement implémenté et m'a pointé vers le traqueur de bogues, j'ai trouvé la tête ticket et en regardant certains des coder les diffs ont beaucoup de FIXME: To be implemented. commentaires.

12
JaredMcAteer

Faites un clic droit pour en créer un nouveau.

Chrome DevTools Snippets — New

9
NVI

La prise en charge des extraits de Chrome Developer Tools permet de créer/modifier/enregistrer et d'exécuter des extraits de code javascript.

5
vsevik

Je ne peux pas activer cette expérience moi-même (il n'y a pas de Developer Tools experiments dans mon chrome:flags, mais de Safari, j'ai trouvé ceci explication:

En bref, c'est "un petit utilitaire qui vous permet de saisir des blocs de HTML et CSS et de les rendre à la volée".

D'après le blog, il semble qu'il soit bogué dans Safari, donc peut-être Chrome ne l'a pas encore implémenté.

3
Vidar S. Ramdal

Vous pouvez trouver la liste des extraits utiles ici http://bgrins.github.io/devtools-snippets/

l'un des extraits utiles est "jquerify.js" - En utilisant cela, vous pouvez inclure jQuery dans n'importe quelle page si elle n'est pas encore incluse.

3
NavaRajan