Les Chrome DevTools fournissent un ensemble incroyable d'outils pour vous aider à développer sur la plate-forme Web. Voici quelques conseils que vous ne connaissez peut-être pas encore
- Glisser-déposer dans le panneau Eléments
- Référencez l'élément actuellement sélectionné dans la console
- Utiliser la valeur de la dernière opération dans la console
- Ajouter du CSS et modifier l'état de l'élément
- Trouver où une propriété CSS est définie
- Enregistrer dans le fichier CSS modifié
- Capturer un seul élément
- Rechercher un élément à l'aide des sélecteurs CSS
- Shift-enter dans la console
- Effacer la console
- Aller à…
- Regarder l'expression
- Débogage XHR / Fetch
- Déboguer sur les modifications DOM
Vérifiezprésentation de Chrome DevToolssi vous êtes nouveau pour eux
Glisser-déposer dans le panneau Eléments
Dans le panneau Eléments, vous pouvez faire glisser et déposer n'importe quel élément HTML et modifier sa position sur la page
Référencez l'élément actuellement sélectionné dans la console
Sélectionnez un nœud dans le panneau Eléments et saisissez$0
dans la console pour y faire référence.
Astuce: si vous utilisez jQuery, vous pouvez saisir
$($0)
pour accéder à l'API jQuery sur cet élément.
Utiliser la valeur de la dernière opération dans la console
Utilisation$_
pour référencer la valeur de retour de l'opération précédente exécutée dans la console
Ajouter du CSS et modifier l'état de l'élément
Dans le panneau Elements, il y a 2 boutons super utiles.
Le premier vous permet d'ajouter une nouvelle propriété CSS, avec n'importe quel sélecteur de votre choix mais en pré-remplissant l'élément actuellement sélectionné:
Le second vous permet de déclencher un état pour l'élément sélectionné, afin que vous puissiez voir les styles appliqués lorsqu'il est actif, survolé, mis au point.
Trouver où une propriété CSS est définie
cmd-click
(ctrl-click
sous Windows) une propriété CSS dans le panneau Éléments, les DevTools vous pointeront vers l'endroit où cela est défini, dans le panneau Source
Enregistrer dans le fichier CSS modifié
Cliquez sur le nom du fichier CSS que vous avez modifié. L'inspecteur l'ouvre dans le volet Sources et à partir de là, vous pouvez l'enregistrer avec les modifications en direct que vous avez appliquées.
Cette astuce ne fonctionne pas pour les nouveaux sélecteurs ajoutés à l'aide de +, ou dans les propriétés element.style, mais uniquement pour les propriétés existantes modifiées.
Capturer un seul élément
Sélectionnez un élément et appuyez surcmd-shift-p
(ouctrl-shift-p
sous Windows) pour ouvrir le menu de commande et sélectionnezCapture d'écran du nœud de capture
Rechercher un élément à l'aide des sélecteurs CSS
Pressagecmd-f
(ctrl-f
sous Windows) ouvre la zone de recherche dans le panneau Eléments.
Vous pouvez y taper n'importe quelle chaîne pour correspondre au code source, ou vous pouvez également utiliser des sélecteurs CSS pour que Chrome génère une image pour vous:
Shift-enter dans la console
Pour écrire des commandes qui s'étendent sur plusieurs lignes dans la console, appuyez surshift-enter
.
Une fois que vous êtes prêt, appuyez sur Entrée à la fin du script pour l'exécuter:
Effacer la console
Vous pouvez effacer la console en utilisant leDégageren haut à gauche de la console, ou en appuyant surctrl-l
oucmd-k
.
Aller à…
Dans le panneau Sources:
cmd-o
(ctrl-o
sous Windows), affiche tous les fichiers chargés par votre page.cmd-shift-o
(ctrl-shift-o
sous Windows) affiche les symboles (propriétés, fonctions, classes) dans le fichier courant.ctrl-g
va à une ligne spécifique.
Regarder l'expression
Au lieu d'écrire encore et encore un nom de variable ou une expression que vous allez beaucoup vérifier lors d'une session de débogage, ajoutez-le auRegarder l'expressionliste.
Débogage XHR / Fetch
Depuis le débogueur, ouvrez leXHR / Fetch Breakpointspanneau.
Vous pouvez le configurer pour qu'il se brise à tout momentXHR/Aller chercherun appel est envoyé, ou uniquement sur certains
Déboguer sur les modifications DOM
Cliquez avec le bouton droit sur un élément et activezRupture sur les modifications de sous-arborescence: chaque fois qu'un script traverse cet élément enfants et les modifie, le débogueur s'arrête automatiquement pour vous permettre d'inspecter ce qui se passe.
Plus de tutoriels devtools:
- Introduction à Yeoman
- Bower, le gestionnaire de packages du navigateur
- Introduction aux tests frontaux
- Utilisation de node-webkit pour créer une application de bureau
- VS Code: utilisez les paramètres spécifiques à la langue
- Introduction à Webpack
- Un guide court et simple de Babel
- Une introduction à Yarn
- Présentation du navigateur DevTools
- Formatez votre code avec Prettier
- Gardez votre code propre avec ESLint
- Une liste de trucs et astuces Chrome DevTools
- Tester JavaScript avec Jest
- Comment utiliser Visual Studio Code
- Introduction à Electron
- Parcel, un webpack plus simple
- Une référence Emmet pour HTML
- Le moteur JavaScript V8
- Configuration du code VS
- Configuration de la ligne de commande macOS
- Comment désactiver une règle ESLint
- Comment ouvrir VS Code à partir de la ligne de commande
- Comment configurer le rechargement à chaud sur Electron