Registra i messaggi nella console

Kayce Basques
Kayce Basques

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

Messaggi nella console.

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.

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

    Questo tutorial a sinistra e la demo a destra.

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

    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 è agganciato alla parte inferiore della demo.

    DevTools sganciato in una finestra separata: 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.

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

    Nella console dopo aver fatto clic su Registra info.

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

    DevTools apre il riquadro Origini dopo che hai fatto clic su log.js:2.

    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 della console è attivo.
    • Apri il menu dei comandi, inizia a digitare Console, seleziona il comando Mostra riquadro della console e premi Invio.
  4. Fai clic sul pulsante Log Warning (Avviso di log) nella demo. Abandon Hope All Ye Who Enter viene registrato nella console.

    La console dopo aver fatto clic su Registra avviso.

    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 alla Console al termine. Esegui questa operazione ogni volta che vuoi vedere il codice che ha causato la registrazione di un messaggio.

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

    Un'analisi dello stack.

    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 che è 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 Errore di log. Viene registrato il seguente messaggio di errore: I'm sorry, Dave. I'm afraid I can't do that.

    Un messaggio di errore.

  8. Fai clic su Tabella log. Una tabella su artisti famosi viene registrata nella Console.

    Una tabella nella console.

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

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

    Un gruppo di messaggi nella console.

  10. Fai clic su Log Custom (Personalizza log). Nella console viene registrato un messaggio con bordo rosso e sfondo blu.

    Un messaggio con formattazione personalizzata nella console.

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.

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

    Errore 404 nella console.

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

    Un errore Type nella console.

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

    Abilitazione del livello di log dettagliato.

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

    Si è verificata una violazione nella console.

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:

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

    Disattivazione dei messaggi a livello di errore nella console.

  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 questa 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. È un bug.

    Escludendo tutti i messaggi che non includono "Dave".

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

  1. Digita /^[AH]/ nella casella di testo Filtro. Digita questo pattern in RegExr per una spiegazione del funzionamento.

    I messaggi che non corrispondono alla sequenza "/^[AH]/" verranno filtrati.

  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 Mostra barra laterale della console..

    La barra laterale.

  2. Fai clic sull'icona Espandi 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.

    Visualizzazione dell'origine dei messaggi nella barra laterale.

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.

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

    Occultamento dei messaggi del browser.

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

  1. Fai clic sulla scheda Elementi.
  2. Premi Esc. Si apre la scheda Console nel riquadro a scomparsa. Ha tutte le funzionalità della console che hai utilizzato durante il tutorial.

    La scheda **Console** nel riquadro a scomparsa.

Passaggi successivi

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