Qualcuno ti avrà già chiesto di “aprire l’ispettore e dire cosa scrive la console”. Ecco come si fa su un Mac, in tutti e due i browser - e in Safari va prima attivata un’impostazione, che è il motivo per cui questa domanda viene fatta due volte.

Chrome

Tre modi, e il primo è quello da ricordare.

  • Clic destro sulla cosa che sembra sbagliata, poi Ispeziona. Il pannello si apre con quell’elemento già selezionato, che è tutto il punto: la domanda era su questo pulsante, non sulla pagina.
  • ⌥⌘I apre il pannello ovunque tu sia.
  • ⌥⌘J lo apre direttamente sulla scheda Console, che è quello che di solito intende chi dice “guarda se ci sono errori”.

Il pannello si apre di fianco alla pagina o sotto. Trascina il suo bordo se è troppo stretto, e usa il menu con i tre puntini in alto a destra per spostarlo in basso, che su uno schermo di portatile è più comodo.

Safari

Safari nasconde tutto questo finché non glielo chiedi, ed è il passaggio che la gente salta.

  1. Apri Safari → Impostazioni (⌘ virgola).
  2. Scegli il pannello Avanzate.
  3. Spunta Mostra funzionalità per sviluppatori web.

Nella barra dei menu compare un menu Sviluppo, e solo a quel punto funziona il resto:

  • Clic destro → Analizza elemento su una parte qualsiasi della pagina.
  • ⌥⌘I apre il Web Inspector.
  • ⌥⌘C lo apre direttamente sulla console.

Nelle versioni più vecchie di macOS la casella si chiama “Mostra menu Sviluppo nella barra dei menu”, nello stesso posto. Se non trovi né l’una né l’altra, stai guardando le impostazioni di un’altra applicazione - Safari deve essere la finestra in primo piano.

Leggere la console, che è probabilmente quello che ti era stato chiesto

La console è la scheda che risponde a “c’è qualcosa che non va”. Contiene i messaggi che la pagina ha scritto mentre la usavi, e sono di tre tipi che vale la pena distinguere.

Di solito non è il problema
Gli avvisi in giallo, e i messaggi di analytics, widget di chat, script pubblicitari o estensioni del browser. Lunghi, rumorosi e in gran parte di qualcun altro
Vale la pena segnalarlo
Gli errori in rosso, e soprattutto il primo. Un errore che nomina un file dell'indirizzo del sito stesso ha molte più probabilità di essere il bug rispetto ai dodici che nominano una terza parte

Due note pratiche. Spesso gli errori ci sono già prima che tu faccia qualcosa, avanzi del caricamento, quindi ricarica la pagina e poi fai la cosa che non funziona: l’errore che vuoi è quello che compare nel momento in cui si rompe. E la console ha un campo di filtro: digitare un pezzo di parola riduce cento righe a quella che ti serve.

Per passare un errore a qualcun altro, fai clic destro sulla riga rossa e copiala, oppure selezionala e premi ⌘C. Va bene anche uno screenshot, purché si veda tutta la riga.

La scheda Rete, per quando non carica niente

Se la pagina sembra vuota invece che sbagliata, la console potrebbe non dire nulla e la scheda Rete dirà tutto. Aprila, ricarica e guarda la colonna Stato: i numeri nei 400 e nei 500 sono richieste fallite, e l’URL accanto dice cosa la pagina stava cercando di caricare. È la differenza fra “il sito è rotto” e “una richiesta a un indirizzo è tornata con un 503”.

Ispezionare una pagina che è sul tuo iPhone

Non sul telefono. Il Web Inspector di Safari gira sul Mac e si aggancia al telefono via cavo: attiva Web Inspector sul telefono in Impostazioni → App → Safari → Avanzate, collegalo, e il dispositivo compare nel menu Sviluppo del Mac. La procedura completa, e cosa fare senza un Mac, è un articolo a sé.

È lo strumento giusto per un bug che si vede solo su mobile e quello sbagliato per chi non è seduto accanto a un Mac, cioè la maggior parte di chi ha appena incontrato un bug che si vede solo su mobile.

Session Replay

Estensione Chrome gratuita. Un clic sulla pagina che si comporta male cattura lo screenshot, la console e il log di rete, e ti restituisce un link da incollare nel ticket.

Installa l'estensione

Se sei tu a chiederlo a qualcun altro

Vale la pena dirlo chiaramente, perché questo articolo esiste soprattutto perché quella richiesta viene fatta.

Chiedere a un collega, a un tester o a un cliente di aprire gli strumenti per sviluppatori, trovare la scheda giusta, giudicare quali righe rosse contano e copiarle con precisione è chiedere più capacità in una volta sola. La maggior parte delle persone manderà la prima riga rossa che vede, che di solito è un avviso di analytics, e lo scambio costa due messaggi e un giorno.

L’istruzione che funziona, se proprio devi chiedere: ricarica, fai la cosa che si rompe, apri la console con ⌥⌘J e mandami tutto quello che è rosso. Precisa, e sposta il giudizio su di te invece che su di loro.

L’alternativa è non chiedere. Se la metà tecnica di una segnalazione può essere catturata dalla persona che preme un pulsante, sapere dove abita la console smette di essere un prerequisito per segnalare un bug - e la segnalazione di bug arriva con quello che è successo, quello che ci si aspettava, e i log di console e di rete già allegati.

Riepilogo veloce

  • Chrome: clic destro → Ispeziona, oppure ⌥⌘I, oppure ⌥⌘J per la console.
  • Safari: Impostazioni → Avanzate → Mostra funzionalità per sviluppatori web, poi ⌥⌘I o ⌥⌘C.
  • Ricarica prima di riprodurre, così gli errori che vedi appartengono al guasto.
  • Le righe rosse che nominano l’indirizzo del sito stesso contano di più; la prima conta più delle altre.