Une liste de trucs et astuces Chrome DevTools

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

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

Drag and Drop in the Elements Panel

Référencez l'élément actuellement sélectionné dans la console

Sélectionnez un nœud dans le panneau Eléments et saisissez$0dans la console pour y faire référence.

Reference elements in the Console

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

Use the last result

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é:

Add a CSS rule

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.

Element state

Trouver où une propriété CSS est définie

cmd-click(ctrl-clicksous 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

Find where a CSS property is defined

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.

Save to File the modified CSS

Capturer un seul élément

Sélectionnez un élément et appuyez surcmd-shift-p(ouctrl-shift-psous Windows) pour ouvrir le menu de commande et sélectionnezCapture d'écran du nœud de capture

Screenshot a single element

Rechercher un élément à l'aide des sélecteurs CSS

Pressagecmd-f(ctrl-fsous 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:

Find an element using CSS selectors

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:

Shift-enter in the Console

Effacer la console

Vous pouvez effacer la console en utilisant leDégageren haut à gauche de la console, ou en appuyant surctrl-loucmd-k.

Aller à…

Dans le panneau Sources:

cmd-o(ctrl-osous Windows), affiche tous les fichiers chargés par votre page.
cmd-shift-o(ctrl-shift-osous Windows) affiche les symboles (propriétés, fonctions, classes) dans le fichier courant.
ctrl-gva à une ligne spécifique.

Files list

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.

Watch Expressions

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

XHR and Fetch debugging

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.

Debug on DOM modifications