Comment inspecter un élément sous Windows et quel panneau répond à quelle question

Sous Windows, la réponse est F12, et c’est tout. Il n’y a pas de menu à activer d’abord, pas de deuxième appareil, pas de câble. Chrome, Edge et Firefox ouvrent tous leurs outils de développement avec la même touche, et contrairement à un Mac ou un iPhone, il n’y a rien qui vous bloque.

Cela signifie que si vous lisez ceci, ce n’est probablement pas l’ouverture qui vous pose problème. Ce qui coûte une après-midi à beaucoup de gens, c’est ce qui vient ensuite : on vous demande quelque chose de spécifique, le panneau devant vous ne le montre pas clairement, et les outils ne vous disent pas quel onglet parmi les huit contient la réponse.

L’ouvrir

Chrome et Edge, qui sont les mêmes outils car Edge est construit sur Chromium :

• F12 ou Ctrl+Shift+I ouvre le panneau que vous aviez utilisé en dernier.
• Ctrl+Shift+J ouvre la Console directement.
• Ctrl+Shift+C ouvre Éléments et active le sélecteur d’éléments en même temps.

Firefox diffère sur l’un des trois :

• F12 ouvre les outils.
• Ctrl+Shift+K ouvre la Console Web.
• Ctrl+Shift+C ouvre l’Inspecteur avec le sélecteur activé, comme dans Chrome.

Faire un clic droit sur n’importe quel élément de la page et choisir Inspecter fait la même chose que Ctrl+Shift+C, et a l’avantage de sélectionner l’élément sur lequel vous avez cliqué. Sur un ordinateur portable où la rangée supérieure utilise les touches de contrôle des médias, F12 peut nécessiter Fn+F12 ; les raccourcis Ctrl+Shift évitent la question.

Le détail qui gaspille le plus de temps

Relisez le premier raccourci : F12 ouvre le panneau que vous aviez utilisé en dernier. La documentation de Microsoft le dit exactement, et Chrome fonctionne de la même façon.

Donc, la seule touche que tout le monde connaît est celle qui ne vous dit pas où vous allez atterrir. Quelqu’un qui a utilisé en dernier l’onglet Réseau appuie sur F12, voit un flot de requêtes, et conclut que la console est vide. La console n’est pas vide. Il ne la regarde simplement pas.

C’est pourquoi Ctrl+Shift+J vaut plus que F12. C’est le raccourci qui signifie « ce que mon collègue m’a vraiment demandé ».

Quel panneau répond à quelle question

Les deux demandes qui se ressemblent mais ne sont pas équivalentes :

« Inspecter l’élément » signifie le panneau Éléments. La question derrière cela concerne ce qui est sur la page : pourquoi ce bouton a-t-il la mauvaise couleur, pourquoi le texte est-il coupé, comment s’appelle ce div. Vous regardez le HTML actif et le CSS appliqué.

« Ouvre la console et dis-moi ce qu’elle dit » signifie le panneau Console. La question derrière cela concerne ce qui s’est mal passé pendant l’exécution de la page. Les lignes rouges ici sont des erreurs JavaScript, et l’une d’elles est très souvent la raison pour laquelle le bouton n’a rien fait.

Ce sont des questions différentes et elles ont des réponses différentes, c’est pourquoi envoyer une capture d’écran du panneau Éléments à quelqu’un qui a demandé des informations sur la console n’aide personne.

Le troisième, que les gens demandent moins souvent mais qui répond à plus de questions :

« Envoie-moi l’onglet réseau » signifie le panneau Réseau, et il s’agit de ce que la page a demandé et de ce qui est revenu. L’ouvrir et ce que XHR signifie réellement fait l’objet d’un guide court, car il y a un piège : il n’enregistre que lorsqu’il est ouvert.

Faible

« J'ai ouvert l'inspecteur d'éléments et je ne vois rien d'anormal. »

Mieux

« Onglet Console, deux lignes rouges : Uncaught TypeError: Cannot read properties of null (reading 'value') at checkout.js:214. Cela se produit quand j'appuie sur Payer, rien d'autre sur la page ne change. »

Ce qu’il faut copier, et ce qu’il ne faut pas

Une fois que vous avez trouvé la ligne rouge, ce qui est utile c’est le texte, pas une photographie de celui-ci.

Faites un clic droit sur un message de console et vous avez des options Copier. Copier le texte du message donne à celui qui a demandé quelque chose qu’il peut rechercher dans son propre code. Une capture d’écran lui donne quelque chose qu’il doit retaper, et les captures d’écran de consoles sont généralement recadrées juste au-dessus du nom du fichier et du numéro de ligne, qui est la partie qui l’aurait localisé.

Deux choses qui valent la peine d’être incluses que les gens oublient :

• Dépliez d’abord l’erreur. Une erreur repliée affiche une seule ligne. La flèche à côté ouvre la pile, et la pile est ce qui indique où c’est arrivé.
• Dites ce que vous avez fait. Une erreur de console sans action à côté est un fait sans cause. « Cela apparaît quand j’appuie sur Payer » en fait quelque chose de reproductible.

Deux choses spécifiques à Windows qui valent la peine de savoir

Un rechargement forcé est Ctrl+F5 ou Ctrl+Shift+R. Quand quelqu’un dit « ça marche pour moi », un fichier en cache obsolète est l’une des raisons ordinaires, et un rechargement forcé est le moyen rapide de l’exclure avant que quelqu’un n’aille regarder dans le code.

Ctrl+Shift+P ouvre le Menu Commande, qui est une boîte de recherche pour chaque fonction dans les outils. Si vous savez ce que vous voulez et pas où c’est, le taper là est plus rapide que de chercher dans les panneaux, et c’est le moyen le plus rapide de sortir du problème « sur quel onglet c’était » au moment où vous en avez plus de trois ouverts.

Ce qu’il faut en retenir

Sous Windows, ouvrir les outils n’a jamais été la partie difficile. Savoir laquelle d’entre elles était demandée l’est.

Ctrl+Shift+J pour la console, Ctrl+Shift+C pour l’élément, et F12 seulement quand vous savez déjà où vous en étiez. Ensuite, copiez le texte plutôt que de le photographier, dépliez l’erreur avant de copier, et dites ce que vous faisiez quand elle est apparue. Cela transforme « j’ai regardé et ça semble bon » en un rapport sur lequel quelqu’un peut agir sans une deuxième conversation.