Registra i messaggi nella console

Kayce Basques

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 abbia compreso i concetti fondamentali dello sviluppo web, ad esempio come utilizzare JavaScript per aggiungere interattività a una pagina.

Configura la demo e DevTools

Questo tutorial è progettato in modo che tu possa aprire la demo e provare tutti i flussi di lavoro. Se segui la procedura, è più probabile che ricordi i flussi di lavoro in un secondo momento.

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 Control+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 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. Lo scopo di questa sezione è presentarti i diversi tipi di messaggi che potresti vedere nella console e spiegare come puoi registrare autonomamente ogni tipo di messaggio dal tuo codice JavaScript.

1. Fai clic sul pulsante Log Info nella demo. Hello, Console! viene registrato nella console.

   

2. Accanto al messaggio Hello, Console! nella console, fai clic su log.js:2. Si apre il riquadro Origini e viene evidenziata 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!').

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

   • Fai clic sulla scheda Console.
   • Premi Ctrl+[ o Comando+[ (Mac) finché la Console non diventa attiva.
   • 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 formattati in questo modo sono avvisi.

5. (Facoltativo) Fai clic su log.js:12 per visualizzare il codice che ha causato il formato del messaggio come questo, quindi torna alla console al termine. Esegui questa operazione ogni volta che vuoi vedere il codice che ha causato la registrazione di un messaggio in un determinato modo.

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

   

   La traccia dello stack indica che è stata chiamata una funzione denominata logWarning, che a sua volta ha chiamato una funzione denominata quoteDante. In altre parole, la chiamata che si è verificata per prima si trova nella parte inferiore della traccia dello stack. Puoi registrare le tracce dello stack in qualsiasi momento chiamando console.trace().

7. Fai clic su Registra errore. 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 di artisti famosi.

   

   Tieni presente che la colonna birthday è compilata solo per una riga. Controlla il codice per capire il motivo.

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

   

10. Fai clic su Registra personalizzata. Nella console viene registrato un messaggio con un bordo rosso e uno sfondo blu.

    

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

Esistono ancora più metodi di quelli mostrati in questa sezione. Al termine del tutorial imparerai a esplorare gli altri metodi.

Visualizzare i messaggi registrati dal browser

Anche il browser registra i messaggi nella Console. Di solito, ciò avviene quando si verifica un problema con la pagina.

1. Fai clic su Causa 404. Il browser registra un errore di rete 404 perché il codice JavaScript della pagina ha provato a recuperare un file inesistente.

   

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

   

3. Fai clic sul menu a discesa Livelli di log e attiva l'opzione Dettagliato se non è attivata. Scopri di più sui filtri nella sezione successiva. Devi farlo per assicurarti che il messaggio successivo registrato 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 saperne di più sulla barra laterale della console.

   

4. Fai clic su Causa 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 viene inondata di messaggi. DevTools offre molti modi diversi per filtrare i messaggi non pertinenti all'attività in corso.

Punto chiave: la console filtra solo i messaggi di output, mentre tutti gli input digitati nella console rimangono al loro interno.

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 Info, mentre console.error() è un messaggio a livello Error.

Nota: per un elenco completo dei metodi console.* e dei relativi livelli di gravità, consulta il riferimento all'API Console.

Per filtrare in base al livello del log:

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

   

2. Fai di nuovo clic sull'elenco a discesa Livelli di log e riabilita Errori. I messaggi di livello Error riappaiono.

Punto chiave: Console ricorda sempre il filtro a discesa che applichi. Rimane in tutte le pagine, nonché nei ricaricamenti di pagine, DevTools e Chrome. Per applicare rapidamente un filtro temporaneo, utilizza la barra laterale.

Filtrare 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 sono nascosti. Potresti anche vedere l'etichetta Adolescent Irradiated Espionage Tortoises. Si tratta di un bug.

   

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

Filtra per espressione regolare

Quando vuoi mostrare 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 cosa fa.

   

2. Elimina /^[AH]/ dalla casella di testo Filtro. Tutti i messaggi sono di nuovo visibili.

Filtra per origine messaggio

Quando vuoi visualizzare solo i messaggi provenienti da un determinato URL, utilizza la barra laterale.

Punto chiave: i filtri della barra laterale sono temporanei. La console non mantiene questi filtri in tutte le pagine, né dopo il ricaricamento di pagine, DevTools e Chrome.

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 di URL che hanno causato la registrazione dei messaggi. Ad esempio, log.js ha causato 11 messaggi.

   

Filtra per messaggi utente

In precedenza, quando hai fatto clic su Log Info (Informazioni log), è stato eseguito 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 di livello Error che indica che la risorsa richiesta non è stata trovata. Messaggi come questi sono considerati messaggi 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 visualizzare di nuovo tutti i messaggi.

Utilizzare la console insieme a qualsiasi altro riquadro

Cosa succede se stai modificando gli stili, ma devi controllare rapidamente il log di Console? Utilizza il riquadro scorrevole.

1. Fai clic sulla scheda Elementi.

2. Premi Esc. Si apre la scheda Console del riquadro laterale. Include tutte le funzionalità della console che hai utilizzato durante questo tutorial.

   

Passaggi successivi

Complimenti, hai completato il tutorial. Fai clic su Assegna trofeo per ricevere il trofeo.

• Consulta la pagina Documentazione della console per scoprire altre funzionalità e altri flussi di lavoro relativi all'interfaccia utente della console.
• Consulta il riferimento all'API Console per scoprire di più su tutti i metodi console che sono stati illustrati in Visualizzare i messaggi registrati da JavaScript ed esplora gli altri metodi console che non sono stati trattati in questo tutorial.
• Consulta la sezione Inizia per scoprire cos'altro puoi fare con DevTools.
• Consulta Formattare e applicare stili ai messaggi nella console per scoprire di più su tutti i metodi di formattazione e applicazione di stili console.