Registra i messaggi nella console

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

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

    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 è stato 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.

    La console dopo aver fatto clic su Log Info.

  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.

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

    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 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 Espandi. davanti a Abandon Hope All Ye Who Enter. DevTools mostra la traccia dello stack che precede la chiamata.

    Un'analisi dello stack.

    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.

    Un messaggio di errore.

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

    Una tabella nella console.

    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.

    Un gruppo di messaggi nella console.

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

    Un messaggio con formattazione personalizzata nella Console.

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.

    Un errore 404 nella console.

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

    Un TypeError nella console.

  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.

    Attivare il livello di log dettagliato.

  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.

    Una violazione nella console.

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.

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.

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.

    Disattivazione dei messaggi a livello di errore nella console.

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

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.

    Filtra tutti i messaggi che non includono "Dave".

  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.

    Filtra tutti i messaggi che non corrispondono al pattern "/^[AH]/".

  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.

  1. Fai clic su Mostra barra laterale della console Mostra la 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 causato 11 messaggi.

    Visualizzazione dell'origine dei messaggi nella barra laterale.

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.

    Filtrare i 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 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.

    La scheda **Console** nel riquadro laterale.

Passaggi successivi

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