Come ispezionare un elemento su Windows e quale pannello risponde a quale domanda

Su Windows la risposta è F12, e basta. Non c’è alcun menu da attivare prima, nessun secondo dispositivo, nessun cavo. Chrome, Edge e Firefox aprono tutti gli strumenti per sviluppatori con lo stesso tasto, e diversamente da un Mac o un iPhone, non c’è nulla che si frappone.

Questo significa che aprire gli strumenti probabilmente non è il problema. La parte che costa ore è quello che viene dopo: è stato richiesto qualcosa di specifico, il pannello davanti non lo mostra chiaramente, e gli strumenti non indicano quale dei otto tab contiene la risposta.

Aprirlo

Chrome e Edge, che sono gli stessi strumenti perché Edge è basato su Chromium:

• F12 o Ctrl+Shift+I apre qualunque pannello sia stato usato per ultimo.
• Ctrl+Shift+J apre direttamente la Console.
• Ctrl+Shift+C apre Elementi e attiva il selettore di elementi allo stesso tempo.

Firefox differisce su uno dei tre:

• F12 apre gli strumenti.
• Ctrl+Shift+K apre la Console Web.
• Ctrl+Shift+C apre l’Ispettore con il selettore attivato, come in Chrome.

Fare clic con il pulsante destro su qualsiasi elemento della pagina e scegliere Ispeziona fa la stessa cosa di Ctrl+Shift+C e ha il vantaggio di selezionare l’elemento selezionato. Su un laptop dove la riga superiore è impostata su tasti media, F12 potrebbe richiedere Fn+F12; i tasti di scelta rapida Ctrl+Shift evitano completamente il problema.

Il dettaglio che spreca più tempo

Si consideri il primo tasto di scelta rapida: F12 apre qualunque pannello sia stato usato per ultimo. La stessa documentazione di Microsoft lo dice esattamente così, e Chrome si comporta allo stesso modo.

Quindi il singolo tasto che tutti conoscono è quello che non indica dove si atterrerà. Chi ha usato per ultimo la scheda Network preme F12, vede una marea di richieste, e conclude che la console sia vuota. La console non è vuota. Semplicemente non la si sta guardando.

Questo è il motivo per cui Ctrl+Shift+J vale più di F12. È il tasto di scelta rapida che significa “la cosa che il collega mi ha effettivamente richiesto”.

Quale pannello risponde a quale domanda

Le due richieste che suonano uguali ma non lo sono:

“Ispeziona elemento” significa il pannello Elementi. La domanda sottesa riguarda cosa c’è sulla pagina: perché questo pulsante ha il colore sbagliato, perché il testo è tagliato, come si chiama questo div. Si sta guardando l’HTML dal vivo e il CSS ad esso applicato.

“Apri la console e dimmi cosa dice” significa il pannello Console. La domanda sottesa riguarda cosa è andato storto mentre la pagina veniva eseguita. Le righe rosse qui sono errori JavaScript, e uno di loro è molto spesso il motivo per cui il pulsante non ha funzionato.

Sono domande diverse e hanno risposte diverse, motivo per cui inviare una schermata del pannello Elementi a chi ha chiesto informazioni sulla console non aiuta nessuno.

Il terzo, che viene richiesto meno spesso ma che fornisce risposte più complete:

“Mandami la scheda network” significa il pannello Rete, ed è su cosa ha chiesto la pagina e cosa è tornato indietro. Aprirlo e cosa significa XHR è una sua breve guida separata, perché ha una trappola: registra solo mentre è aperto.

Debole

"Ho aperto l'ispettore e non vedo nulla di sbagliato."

Migliore

"Scheda Console, due righe rosse: Uncaught TypeError: Cannot read properties of null (reading 'value') at checkout.js:214. Accade quando premo Pay, nulla di altro sulla pagina cambia."

Cosa copiare e cosa no

Una volta trovata la riga rossa, l’elemento utile è il testo, non una fotografia di esso.

Fare clic con il pulsante destro su un messaggio di console fornisce opzioni Copia. Copiare il testo del messaggio offre a chi ha chiesto qualcosa che può cercare nel proprio codice. Una schermata fornisce qualcosa che deve essere riscritta, e le schermate delle console di solito sono ritagliate appena sopra il nome del file e il numero di riga, che è la parte che l’avrebbe individuato.

Due cose che vale la pena includere e che spesso vengono tralasciate:

• Espandere prima l’errore. Un errore compresso mostra una riga. La freccia accanto ad esso apre lo stack, e lo stack è quello che indica dove è successo.
• Indicare cosa è stato fatto. Un errore di console senza azione accanto è un fatto senza causa. “Appare quando premo Pay” lo trasforma in qualcosa di riproducibile.

Due cose specifiche di Windows che vale la pena sapere

Un aggiornamento forzato è Ctrl+F5 o Ctrl+Shift+R. Quando qualcuno dice “funziona per me”, un file memorizzato nella cache scaduto è uno dei motivi ordinari, e un aggiornamento forzato è il modo più veloce per escluderlo prima che qualcuno vada a cercare nel codice.

Ctrl+Shift+P apre il Menu Comando, una casella di ricerca per ogni funzione negli strumenti. Se si sa cosa si vuole e non dove si trova, digitarlo lì è più veloce che cercare nei pannelli, ed è il modo più rapido per uscire dal problema “quale scheda era quella” nel momento in cui se ne hanno più di tre aperte.

Cosa trarne

Su Windows, aprire gli strumenti non è mai stato la parte difficile. Sapere quale di essi venisse richiesto è.

Ctrl+Shift+J per la console, Ctrl+Shift+C per l’elemento, e F12 solo quando si sa già dove si è lasciato off. Poi copiare il testo piuttosto che fotografarlo, espandere l’errore prima di copiare, e indicare cosa si stava facendo quando è apparso. Questo trasforma “ho dato un’occhiata e sembra ok” in un rapporto su cui qualcuno può agire senza una seconda conversazione.