Registra i messaggi nella console

Kayce Basques

Questo tutorial interattivo mostra come registrare e filtrare i messaggi nella console di Chrome DevTools.

Questo tutorial è pensato per essere completato in ordine. Si presuppone 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. Quando segui fisicamente i passaggi, è più probabile che ricorderai i flussi di lavoro in seguito.

1. Apri la demo.

2. (Facoltativo) Sposta la demo in una finestra separata. In questo esempio, il tutorial è a sinistra e la demo a destra.

   

3. Imposta lo stato attivo sulla demo, quindi premi Ctrl + Maiusc + J o Comando + Opzione + J (Mac) per aprire DevTools. Per impostazione predefinita, DevTools si apre a destra della demo.

   

4. (Facoltativo) Aggancia DevTools alla parte inferiore della finestra o sgancialo in una finestra separata.

   DevTools agganciato alla parte inferiore della demo:

   DevTools sganciato dal dock in una finestra separata:

Visualizzare 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 probabilmente vedrai nella console e spiegare come registrare personalmente ogni tipo di messaggio dal tuo codice JavaScript.

1. Fai clic sul pulsante Log Info (Informazioni log) nella demo. L'app Hello, Console! viene registrata nella console.

   

2. Accanto al messaggio Hello, Console! nella console, fai clic su log.js:2. Si apre il riquadro Origini, che evidenzia la riga di codice che ha generato l'accesso del messaggio alla console.

   

   Il messaggio è stato registrato quando il codice JavaScript della pagina ha chiamato console.log('Hello, Console!').

3. Torna alla console utilizzando uno dei seguenti flussi di lavoro:

   • Fai clic sulla scheda Console.
   • Premi Ctrl+[ o Comando+[ (Mac) finché lo stato attivo non è impostato sulla console.
   • Apri il menu dei comandi, inizia a digitare Console, seleziona il comando Mostra riquadro della console e premi Invio.

4. Fai clic sul pulsante Registra avviso nella demo. Abandon Hope All Ye Who Enter viene registrato nella console.

   

   I messaggi con questo formato sono avvisi.

5. (Facoltativo) Fai clic su log.js:12 per visualizzare il codice che ha generato una formattazione simile al seguente, quindi torna alla console al termine. Fallo ogni volta che vuoi vedere il codice che ha causato la registrazione di un messaggio in un certo modo.

6. Fai clic sull'icona Espandi davanti a Abandon Hope All Ye Who Enter. DevTools mostra la traccia dello stack che porta alla chiamata.

   

   L'analisi dello stack indica che è stata chiamata una funzione denominata logWarning, che a sua volta è stata chiamata una funzione denominata quoteDante. In altre parole, la chiamata avvenuta per prima si trova in fondo all'analisi dello stack. Puoi registrare le analisi dello stack in qualsiasi momento chiamando console.trace().

7. Fai clic su Registra errori. Viene registrato il seguente messaggio di errore: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Fai clic su Tabella di log. Nella console viene registrata una tabella relativa ad artisti famosi.

   

   Nota come la colonna birthday viene compilata solo per una riga. Controlla il codice per capire il motivo.

9. Fai clic su Gruppo di log. I nomi di 4 famose tartarughe che combattono il crimine sono raggruppati sotto l'etichetta Adolescent Irradiated Espionage Tortoises.

   

10. Fai clic su Log personalizzato. Un messaggio con bordo rosso e sfondo blu viene registrato nella console.

    

L'idea principale è che quando vuoi registrare messaggi nella console da JavaScript, devi utilizzare uno dei metodi console. Ogni metodo formatta i messaggi in modo diverso.

Esistono anche più metodi rispetto a quelli dimostrati in questa sezione. Alla fine 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.

1. Fai clic su Causa 404. Il browser registra un errore di rete 404 perché il JavaScript della pagina ha tentato di recuperare un file che non esiste.

   

2. Fai clic su Causa errore. Il browser registra un TypeError non rilevato perché JavaScript sta tentando di aggiornare un nodo DOM che non esiste.

   

3. Fai clic sul menu a discesa Livelli di log e attiva l'opzione Dettagliato se è disabilitata. Scopri di più sull'applicazione di filtri nella prossima sezione. Devi farlo per assicurarti che il messaggio successivo nel log sia visibile. Nota: se il menu a discesa Livelli predefiniti è disattivato, potresti dover chiudere la barra laterale della console. Filtra per origine messaggio di seguito per ulteriori informazioni sulla barra laterale della console.

   

4. Fai clic su Causa della violazione. La pagina non risponde per alcuni secondi, dopodiché 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 che non sono pertinenti all'attività in questione.

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 in base al livello di log:

1. Fai clic sul menu a discesa Livelli di log e disattiva Errori. Un livello è disattivato se accanto non è più presente un segno di spunta. I messaggi a livello di Error scompaiono.

   

2. 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 la stringa nella casella di testo Filtro.

1. Digita Dave nella casella di testo Filtro. Tutti i messaggi che non includono la stringa Dave vengono nascosti. Potresti anche vedere l'etichetta Adolescent Irradiated Espionage Tortoises. È un bug.

   

2. Elimina Dave dalla casella di testo Filtro. Tutti i messaggi vengono di nuovo visualizzati.

Filtra per espressione regolare

Quando vuoi visualizzare tutti i messaggi che includono un pattern di testo, anziché una stringa specifica, utilizza un'espressione regolare.

1. Digita /^[AH]/ nella casella di testo Filtro. Digita questo pattern in RegExr per una spiegazione di ciò che sta facendo.

   

2. 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.

1. Fai clic su Mostra barra laterale della console .

   

2. Fai clic sull'icona Espandi accanto a 12 messaggi. La barra laterale mostra un elenco degli URL che hanno generato la registrazione di messaggi. Ad esempio, log.js ha generato 11 messaggi.

   

Filtra per messaggi utente

In precedenza, quando hai fatto clic su Informazioni log, viene eseguito uno script denominato console.log('Hello, Console!') per registrare il messaggio nella console. I messaggi registrati da JavaScript come questo sono chiamati messaggi utente. Al contrario, quando hai fatto clic su Causa 404, il browser ha registrato un messaggio a livello di Error in cui si affermava che non è stato possibile trovare la risorsa richiesta. Questi messaggi sono considerati messaggi del browser. Puoi utilizzare la barra laterale per filtrare i messaggi del browser e mostrare solo i messaggi degli utenti.

1. Fai clic su 9 messaggi per gli utenti. I messaggi del browser sono nascosti.

   

2. Fai clic su 12 messaggi per mostrare di nuovo tutti i messaggi.

Utilizza la console accanto a qualsiasi altro riquadro

E se, mentre modifichi gli stili, ma avessi bisogno di controllare rapidamente il log della console, Usa il riquadro a scomparsa.

1. Fai clic sulla scheda Elementi.

2. Premi Esc. Si apre la scheda Console del Riquadro a scomparsa. Ha tutte le funzionalità della console che hai utilizzato in questo tutorial.

   

Passaggi successivi

Congratulazioni, hai completato il tutorial. Fai clic su Dispense Trophy per ricevere il trofeo.

• Consulta la documentazione della console per scoprire altre funzionalità e flussi di lavoro relativi all'UI della console.
• Consulta la documentazione di riferimento dell'API Console per ulteriori informazioni su tutti i metodi console dimostrati in Visualizzare i messaggi registrati da JavaScript ed esplora gli altri metodi console non trattati in questo tutorial.
• Consulta la Guida introduttiva per scoprire cos'altro puoi fare con DevTools.
• Consulta Formatta e stile dei messaggi nella console per saperne di più su tutti i metodi di formattazione e stile di console.