Géneral

Capture d'écran:

Paramètres:

Inspecteur de page

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.

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

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

Dans la vue des règles CSS:

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

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:

Dans la sortie de la console:

Débogueur

  • Éviter les bibliothèques JavaScript durant la session de débogage via l'icône de boite noire (Icon for black boxing a JavaScript source).
  • 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.

Éditeur de feuilles de style CSS

  • L'icône de boite noire (Icon for black boxing a JavaScript source) 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 (Button to import a style sheet from the file system) pour importer une feuille de style ou le bouton de création (Button to create a new style sheet) 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

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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore, JeffD
 Dernière mise à jour par : maximelore,