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 Barre de développement: screenshot [nom-du-fichier] [options].

Paramètres:

• Choisir entre un theme lumineux, sombre et le theme Firebug  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 !)

Inspecteur de page

Dans l'onglet Inspecteur:

• Pressez H quand un noeud est sélectionné pour le cacher/l'afficher.
• Pressez Backspace ou Del quand un noeud est sélectionné pour le supprimer.
• Alt + clic sur un noeud pour le développer avec l'ensemble de ses noeuds enfants.
• Cliquez sur le dernier élement du fil d'ariane pour faire défiler la sélection dans l'inspecteur de page.
• Cliquez sur l'icone "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.

Lors de la sélection des éléments:

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

Dans la vue des règles CSS:

• Cliquez sur l'icone d'inspection () à côté de n'importe quel sélecteur pour surligner tous les élements qui correspondent.
• Cliquez sur l'icone d'inspection () à côté de la règle de l'element{} pour bloquer le surlignage sur l'élement 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'icone 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.

Console web

Dans tous les onglets:

• Esc ouvre la console scindée utile lors du debug, ou l'inspection des noeuds.

Dans la ligne de commande:

• $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.

Dans la sortie de la console:

• Cliquez sur l'icone d'inspection () a 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.

Débogueur

• Eviter les bibliothèques JavaScript durant la session de débogage via l'icone 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.

Editeur de feuilles de style CSS

• 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.

Réseau

• 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.

Stockage

• 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.

Barre de développement

• Press Shift + F2 pour ouvrir La barre de développement (GCLI), fournissant des commandes pour contrôler la page, les outils de développement et et la navigateur et d'autres fonctions.
• help ouvre une popup pour afficher toute les commandes disponibles.
• security csp affiche les règles de Stratégie de Sécurité de contenu (Content Security Policy).
• pref show, pref set and pref reset afficher, définir et réinitialiser la valeur d'une préférence du navigateur.
• folder openprofile ouvre le repertoire du profil courant dans l'explorateur de fichier.
• media emulate media type simule un type de média spécifique.