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:

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

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.

Étiquettes et contributeurs liés au document

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