Questo tutorial interattivo mostra come registrare e filtrare i messaggi nella console di Chrome DevTools.
Questo tutorial deve essere completato in ordine. Si presume che tu conosca le nozioni di base dello sviluppo web, ad esempio come usare JavaScript per aggiungere interattività a una pagina.
Configura la demo e DevTools
Questo tutorial è progettato per consentirti di aprire la demo e provare personalmente tutti i flussi di lavoro. Se segui fisicamente il tuo progetto, è più probabile che ricordi i flussi di lavoro in seguito.
- Apri la demo.
(Facoltativo) Sposta la demo in una finestra separata. In questo esempio, il tutorial è a sinistra, mentre la demo è a destra.
Imposta lo stato attivo sulla demo e premi Ctrl+Maiusc+J o Comando+Opzione+J (Mac) per aprire DevTools. Per impostazione predefinita, DevTools si apre a destra della demo.
(Facoltativo) Aggancia DevTools alla parte inferiore della finestra o sgancialo in una finestra separata.
DevTools è agganciato alla parte inferiore della demo:
DevTools sganciato in una finestra separata:
Visualizza i messaggi registrati da JavaScript
La maggior parte dei messaggi visualizzati nella console proviene dagli sviluppatori web che hanno scritto il codice JavaScript della pagina. L'obiettivo di questa sezione è presentarti i diversi tipi di messaggi che è probabile vengano visualizzati nella console e spiegarti come registrare autonomamente ogni tipo di messaggio dal tuo codice JavaScript.
Fai clic sul pulsante Info log nella demo.
Hello, Console!
viene registrato nella console.Accanto al messaggio
Hello, Console!
nella console, fai clic su log.js:2. Si apre il riquadro Origini ed evidenzia la riga di codice che ha causato la registrazione del messaggio nella console.Il messaggio è stato registrato quando il codice JavaScript della pagina ha chiamato
console.log('Hello, Console!')
.Torna alla console utilizzando uno dei seguenti flussi di lavoro:
- Fai clic sulla scheda Console.
- Premi Ctrl+[ o Comando+[ (Mac) finché lo stato attivo della console è attivo.
- Apri il menu dei comandi, inizia a digitare
Console
, seleziona il comando Mostra riquadro della console e premi Invio.
Fai clic sul pulsante Log Warning (Avviso di log) nella demo.
Abandon Hope All Ye Who Enter
viene registrato nella console.I messaggi formattati in questo modo sono avvisi.
(Facoltativo) Fai clic su log.js:12 per visualizzare il codice che ha causato la formattazione del messaggio in questo modo, quindi torna alla Console al termine. Esegui questa operazione ogni volta che vuoi vedere il codice che ha causato la registrazione di un messaggio.
Fai clic sull'icona Espandi davanti a
Abandon Hope All Ye Who Enter
. DevTools mostra l'analisi dello stack che porta alla chiamata.L'analisi dello stack indica che è stata chiamata una funzione denominata
logWarning
, che a sua volta ha chiamato una funzione denominataquoteDante
. In altre parole, la chiamata che è avvenuta per prima si trova in fondo all'analisi dello stack. Puoi registrare le analisi dello stack in qualsiasi momento chiamandoconsole.trace()
.Fai clic su Errore di log. Viene registrato il seguente messaggio di errore:
I'm sorry, Dave. I'm afraid I can't do that.
Fai clic su Tabella log. Una tabella su artisti famosi viene registrata nella Console.
Nota come la colonna
birthday
viene completata solo per una riga. Controlla il codice per capire il motivo.Fai clic su Gruppo di log. I nomi di 4 famose tartarughe combattono il crimine sono raggruppati sotto l'etichetta
Adolescent Irradiated Espionage Tortoises
.Fai clic su Log Custom (Personalizza log). Nella console viene registrato un messaggio con bordo rosso e sfondo blu.
L'idea principale è che quando vuoi registrare i messaggi nella console da JavaScript, devi
utilizzare uno dei metodi console
. Ogni metodo formatta i messaggi in modo diverso.
Esistono anche altri metodi rispetto a quelli descritti in questa sezione. Al termine del tutorial imparerai a esplorare gli altri metodi.
Visualizzare i messaggi registrati dal browser
Il browser registra anche i messaggi nella console. Questo di solito accade quando c'è un problema con la pagina.
Fai clic su Causa 404. Il browser registra un errore di rete
404
perché il codice JavaScript della pagina ha tentato di recuperare un file che non esiste.Fai clic su Causa errore. Il browser registra un
TypeError
non rilevato perché JavaScript sta cercando di aggiornare un nodo DOM che non esiste.Fai clic sul menu a discesa Livelli di log e attiva l'opzione Dettagliato se è disabilitata. Per ulteriori informazioni sui filtri, consulta la prossima sezione. È necessario eseguire questa operazione per assicurarti che il messaggio successivo registrato nel log sia visibile. Nota: se il menu a discesa Livelli predefiniti è disattivato, potrebbe essere necessario chiudere la barra laterale della console. Filtra per origine messaggio di seguito per ulteriori informazioni sulla barra laterale della console.
Fai clic su Causa violazione. La pagina non risponde per alcuni secondi e poi il browser registra il messaggio
[Violation] 'click' handler took 3000ms
nella console. La durata esatta può variare.
Filtra i messaggi
In alcune pagine la console è piena di messaggi. DevTools offre molti modi diversi per filtrare i messaggi non pertinenti all'attività in corso.
Filtra per livello di log
A ogni metodo console.*
viene assegnato un livello di gravità: Verbose
, Info
, Warning
o Error
. Ad esempio, console.log()
è un messaggio a livello di Info
, mentre console.error()
è un messaggio a livello di Error
.
Per filtrare per livello di log:
Fai clic sul menu a discesa Livelli di log e disattiva Errori. Un livello è disabilitato quando accanto non è presente un segno di spunta. I messaggi a livello di
Error
scompaiono.Fai di nuovo clic sul menu a discesa Livelli di log e riattiva Errori. Vengono visualizzati di nuovo i messaggi a livello di
Error
.
Filtra per testo
Quando vuoi visualizzare solo i messaggi che includono una stringa esatta, digita questa stringa nella casella di testo Filtro.
Digita
Dave
nella casella di testo Filtro. Tutti i messaggi che non includono la stringaDave
sono nascosti. Potresti anche vedere l'etichettaAdolescent Irradiated Espionage Tortoises
. È un bug.Elimina
Dave
dalla casella di testo Filtro. Vengono visualizzati di nuovo tutti i messaggi.
Filtra per espressione regolare
Se vuoi mostrare tutti i messaggi che includono un pattern di testo anziché una stringa specifica, utilizza un'espressione regolare.
Digita
/^[AH]/
nella casella di testo Filtro. Digita questo pattern in RegExr per una spiegazione del funzionamento.Elimina
/^[AH]/
dalla casella di testo Filtro. Tutti i messaggi sono di nuovo visibili.
Filtra per origine messaggio
Se vuoi visualizzare solo i messaggi provenienti da un determinato URL, utilizza la barra laterale.
Fai clic su Mostra barra laterale della console .
Fai clic sull'icona Espandi accanto a 12 messaggi. La barra laterale mostra un elenco di URL che hanno causato la registrazione dei messaggi. Ad esempio,
log.js
ha generato 11 messaggi.
Filtra per messaggi utente
In precedenza, quando facevi clic su Info log, veniva creato uno script chiamato console.log('Hello, Console!')
per registrare il messaggio nella console. I messaggi registrati da JavaScript come questo sono chiamati messaggi dell'utente. Al contrario, quando hai fatto clic su Causa 404, il browser ha registrato un messaggio a livello di Error
indicante che non è stato possibile trovare la risorsa richiesta. Messaggi di questo tipo sono considerati messaggi del browser. Puoi utilizzare la barra laterale per filtrare i messaggi del browser e mostrare solo i messaggi degli utenti.
Fai clic su 9 messaggi per gli utenti. I messaggi del browser sono nascosti.
Fai clic su 12 messaggi per visualizzare di nuovo tutti i messaggi.
Utilizzare la console insieme a qualsiasi altro riquadro
Cosa succede se modifichi gli stili, ma devi controllare rapidamente se è presente qualcosa nel log della console? Utilizza il riquadro a scomparsa.
- Fai clic sulla scheda Elementi.
Premi Esc. Si apre la scheda Console nel riquadro a scomparsa. Ha tutte le funzionalità della console che hai utilizzato durante il tutorial.
Passaggi successivi
Congratulazioni, hai completato il tutorial. Fai clic su Assegna trofeo per ricevere il trofeo.
- Consulta i riferimenti per la console per scoprire altre funzionalità e flussi di lavoro correlati all'interfaccia utente della console.
- Consulta i riferimenti sull'API della console per saperne di più su tutti i metodi
console
illustrati nella sezione Visualizzare i messaggi registrati da JavaScript ed esplorare gli altri metodiconsole
non trattati in questo tutorial. - Consulta la sezione Inizia per scoprire cos'altro puoi fare con DevTools.
- Per saperne di più su tutti i metodi di formattazione e di stile di
console
, vedi Formattare e applicare stili ai messaggi nella console.