Astuces

Géneral

Capture d'écran:

Page entière: cliquez sur le bouton de capture d'écran (; doit d'abord être activé).
Partie visible de l'écran: cliquez sur le bouton de capture d'écran () du mode Vue Adaptative.
noeud: clic droit sur le noeud dans l'inspecteur et cliquez sur "Prendre une capture du noeud".
Via la commande Console: screenshot [nom-du-fichier] --fullpage.

Paramètres:

Choisir entre un thème lumineux et un thème sombre pour les outils de développement.
Modifiez la correspondance du clavier pour Vim, Emacs ou Sublime Text si vous êtes habitué à des raccourcis différents.
Cochez ou décochez les différents outils pour les activer ou les désactiver. (Il y en a plus que les outils par défaut !)

Dans l'onglet Inspecteur:

Pressez H quand un noeud est sélectionné pour le cacher/l'afficher.
Pressez Retour ou Suppr quand un noeud est sélectionné pour le supprimer.
Alt + clic sur un noeud pour le développer/réduire lui-même ainsi que l'ensemble de ses noeuds enfants.
Cliquez sur le dernier élément du fil d’Ariane pour faire défiler la sélection dans l'inspecteur de page.
Cliquez sur l’icône "ev" à côté du noeud pour voir tous les évènements qui écoutent sur ce noeud.
Pressez S avec un noeud sélectionné pour le voir dans la page (idem qu'un clic-droit sur un noeud puis "Faire défiler la vue jusqu'au noeud").
Cliquez-droit sur un noeud et cliquez sur "Utiliser dans la console" pour utiliser la ligne de commande avec ce noeud en tant que variable tempN.

Maj + clic pour sélectionner un élément en conservant la sélection (Le mode sélection ne se désengage pas).
Utilisez ←/→ pour naviguer sur l’élément parent/enfant (si ils sont trop durs à sélectionner).

Cliquez sur l’Icône d'inspection () à côté de n'importe quel sélecteur pour surligner tous les éléments qui correspondent.
Cliquez sur l'icône d'inspection () à côté de la règle de l'element{} pour bloquer le surlignage sur l'élément courant.
Cliquez droit sur n'importe quelle propriété et sélectionnez "Afficher la documentation MDN" pour voir la documentation MDN pour cette propriété.
Cliquez sur l'icône de filtre () à côté d'une propriété surchargée pour trouver quelle autre propriété la surcharge.
Cliquez-droit sur un nom, une valeur, une règle pour copier n'importe quel nom, valeur, déclaration ou la règle complète dans le presse-papier.

Dans tous les onglets:

$0 fait référence au noeud actuellement selectionné.
$() est un raccourci pour document.querySelector().
$$() retourne sous forme d'un tableau les résultats de document.querySelectorAll().
copy copie tout comme une chaîne.
Cliquez-droit sur un noeud de l'Inspecteur puis cliquez sur "Utiliser dans la Console" pour créer une variable tempN de ce noeud.
cd bascule le contexte d'évaluation JavaScript dans un iframe différent dans la page.
console.table() affiche des données tabulaires dans un tableau.
help ouvre la page MDN de description des commandes disponibles.
:screenshot <filename.png> --fullpage enregistre une capture d'écran dans le dossier "Téléchargements" en utilisant avec le nom du fichier s'il est renseigné en option. Sans nom spécifique le nom sera de ce format-ci: [Date de la Capture] at [heure de la capture].png

Le paramètre --fullpage est optionnel, s'il est inclus, la capture couvrira la page entière, pas juste la partie visible dans la fenêtre de navigation. Le nom du fichier aura également le sufixe "-fullpage". Voir Fonctions d'aides de la Console pour une liste de tous les paramètres.

Dans la sortie de la console:

Cliquez sur l’icône d'inspection () à côté de l'élément dans la sortie de la console pour le sélectionner dans l'inspecteur
Choisissez "Activer les journaux persistants" dans la configuration pour conserver les messages du journal, même ceux d'avant la navigation.
Choisissez "Activer l'horodatage" dans la configuration pour montrer l'horodatage à côté des messages du journal.

Éviter les bibliothèques JavaScript durant la session de débogage via l'icône de boite noire ().
Pressez Ctrl+Alt+F pour rechercher dans tous les scripts.
Pressez Ctrl+D pour rechercher la définition d'une fonction.
Pressez Ctrl+L pour aller à une ligne spécifique.

L'icône de boite noire () du panneau des feuilles de style permet d'afficher ou de cacher une feuille de style.
Cliquez sur une règle @media pour l'appliquer dans la Vue adaptative.
Cliquez sur le bouton d'import () pour importer une feuille de style ou le bouton de création () pour en créer une nouvelle.
Cliquez sur le bouton d'option du panneau des feuilles de style et cliquez sur "Afficher les sources originales" pour basculer vers l'affichage des fichiers du pré-processeur CSS.

Cliquez sur le résumé de la requête pour comparer la performance du chargement avec cache et du chargement sans cache.
Quand une requête est sélectionnée cliquez sur "Modifier et renvoyer" pour modifier l'en-tête et la renvoyer.
Cochez "Activer les journaux persistants" dans la configuration pour conserver les requêtes précedentes et suivantes à la navigation.
Survoler l'icône "js" de la colonne "Source" pour voir la trace de la pile JavaScript responsable de la requête.
Cochez "Désactivez le cache HTTP (lorsque la boite à outils est ouverte)" dans la configuration pour désactiver le cache réseau lors du débogage des problèmes réseau.

Cliquez-droit sur l'en-tête de la colonne pour ouvrir un menu permettant de changer l'affichage de la colonne.
Cliquez-droit sur une entrée et cliquez sur "Supprimer nom" pour la supprimer ou "Tout supprimer" pour supprimer toute les entrées.
Sélectionnez une entrée pour voir sa valeur dans la barre latérale.