Registra i messaggi nella console

Kayce Basques

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

Questo tutorial deve essere completato in ordine. Presuppone che tu conosca i concetti fondamentali dello sviluppo web, ad esempio come utilizzare JavaScript per aggiungere interattività a una pagina.

Configurare la demo e DevTools

Questo tutorial è progettato in modo da poter aprire la demo e provare tutti i workflow in autonomia. Quando segui fisicamente i passaggi, è più probabile che tu 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 si trova a sinistra e la demo a destra.

   

3. Concentrati sulla demo e poi premi Ctrl+Maiusc+J o Cmd+Opzione+J (Mac) per aprire DevTools. Per impostazione predefinita, DevTools si apre a destra della demo.

   

4. (Facoltativo) Ancora DevTools nella parte inferiore della finestra o sgancialo in una finestra separata.

   DevTools ancorato 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 probabilmente vedrai nella console e spiegare come puoi registrare autonomamente ogni tipo di messaggio dal tuo JavaScript.

1. Fai clic sul pulsante Informazioni di accesso 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 Cmd+[ (Mac) finché la console non è attiva.
   • Apri il menu dei comandi, inizia a digitare Console, seleziona il comando Mostra pannello della console e poi premi Invio.

4. Fai clic sul pulsante Log Warning (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 la formattazione del messaggio in questo modo, quindi torna a Console al termine. Esegui questa operazione ogni volta che vuoi visualizzare 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 l'analisi dello stack che precede la chiamata.

   

   L'analisi 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 avvenuta per prima si trova in fondo all'analisi dello stack. Puoi registrare le stack trace 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 log. Nella console viene registrata una tabella sui pittori famosi.

   

   Nota come la colonna birthday sia compilata solo per una riga. Controlla il codice per capire perché.

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

   

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

    

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

Esistono ancora più metodi di quelli dimostrati 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 questo accade quando si verifica 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 inesistente.

   

2. Fai clic su Causa errore. Il browser registra un errore 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 è disattivata. Scoprirai di più sul filtraggio nella sezione successiva. Devi farlo per assicurarti che il messaggio successivo che registri 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 saperne di più sulla barra laterale della console.

   

4. Fai clic su Causa violazione. La pagina smette di rispondere 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 vedrai la console inondata di messaggi. Gli strumenti di sviluppo forniscono molti modi diversi per filtrare i messaggi che non sono pertinenti all'attività in corso.

Punto chiave: la console filtra solo i messaggi di output, tutti gli input che hai digitato nella console rimangono lì.

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.

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 di 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 di Error scompaiono.

   

2. Fai di nuovo clic sul menu a discesa Livelli di log e riattiva Errori. I messaggi a livello di Error riappaiono.

Punto chiave: la console ricorda sempre il filtro del menu a discesa che applichi. Viene mantenuto 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 Filtro.

1. Digita Dave nella casella Filtro. Tutti i messaggi che non includono la stringa Dave sono nascosti.

   

2. Elimina Dave dalla casella 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 Filtro. Digita questo pattern in RegExr per una spiegazione di cosa fa.

   

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

Filtrare per origine messaggio

Se 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 su tutte le pagine, nonché sui ricaricamenti 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 facevi clic su Log Info, veniva chiamato uno script denominato console.log('Hello, Console!') per registrare il messaggio nella console. I messaggi registrati da JavaScript come questo vengono chiamati messaggi 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 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.

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.

Utilizza la console insieme a qualsiasi altro pannello

Cosa succede se stai modificando gli stili, ma devi controllare rapidamente il log della console per qualcosa? Usa il drawer.

1. Fai clic sulla scheda Elementi.

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

   

Passaggi successivi

Congratulazioni, hai completato il tutorial. Fai clic su Eroga trofeo per ricevere il tuo trofeo.

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