Riferimento alle funzionalità della console

Questa pagina è un riferimento alle funzionalità relative alla console Chrome DevTools. Presuppone che tu abbia già familiarità con l'utilizzo della console per visualizzare i messaggi registrati ed eseguire JavaScript. In caso contrario, consulta la sezione Guida introduttiva.

Se stai cercando il riferimento API per funzioni come console.log(), consulta Riferimento API Console. Per il riferimento alle funzioni come monitorEvents(), consulta la documentazione di riferimento dell'API Console Utilities.

Apri la console

Puoi aprire la console come riquadro o come scheda nel riquadro a scomparsa.

Apri il riquadro della console

Premi Controllo+Maiusc+J o Comando+Opzione+J (Mac).

Per aprire la console dal menu dei comandi, inizia a digitare Console e poi esegui il comando Mostra console con il badge Pannello accanto.

Aprire la console nel riquadro

Premi Esc o fai clic su Personalizza e controlla DevTools e poi seleziona Mostra riquadro della console.

Il riquadro a scomparsa si apre nella parte inferiore della finestra DevTools, con la scheda Console aperta.

Per aprire la scheda Console dal menu Comando, inizia a digitare Console e poi esegui il comando Mostra console con il badge Riquadro accanto.

Apri le impostazioni della console

Fai clic su Impostazioni console nell'angolo in alto a destra della console.

I link riportati di seguito spiegano ciascuna impostazione:

• Nascondi rete
• Conserva log
• Solo contesto selezionato
• Raggruppa i messaggi simili nella console
• Mostra gli errori CORS nella console
• Log XMLHttpRequests
• Valutazione eager
• Completamento automatico dalla cronologia

Apri la barra laterale della console

Fai clic su Mostra barra laterale della console per visualizzare la barra laterale, utile per il filtraggio.

Visualizza messaggi

Questa sezione contiene funzionalità che modificano la modalità di presentazione dei messaggi nella console. Per una procedura dettagliata pratica, consulta Visualizzare i messaggi.

Disattivare il raggruppamento dei messaggi

Apri le impostazioni della console e disattiva Raggruppa simili per disattivare il comportamento di raggruppamento predefinito dei messaggi della console. Per un esempio, vedi Registrare le richieste XHR e Fetch.

Visualizzare i messaggi dai punti di interruzione

La console contrassegna i messaggi attivati dai punti di interruzione nel seguente modo:

• Chiamate console.* nei punti di interruzione condizionali con un punto interrogativo arancione ?
• Messaggi Logpoint con due puntini rosa ..

Per passare all'editor di punti di interruzione incorporato nel riquadro Sources (Origini), fai clic sul link di ancoraggio accanto al messaggio del punto di interruzione.

Visualizza analisi dello stack

La console acquisisce automaticamente le analisi dello stack per errori e avvisi. Un'analisi dello stack è una cronologia delle chiamate di funzione (frame) che hanno generato l'errore o l'avviso. La console li mostra in ordine inverso: l'ultimo frame è in alto.

Per visualizzare un'analisi dello stack, fai clic sull'icona di espansione accanto a un errore o un avviso.

Visualizzare le cause degli errori nelle analisi dello stack

La console può mostrare catene di cause di errore nell'analisi dello stack, se presenti.

Per semplificare il debug, puoi specificare le cause degli errori quando li rilevi e li rilanci. Man mano che la console risale la catena di cause, stampa ogni stack di errori con il prefisso Caused by:, in modo che tu possa trovare l'errore originale.

Visualizza analisi dello stack asincrone

Se supportato dal framework che utilizzi o quando utilizzi direttamente primitive di pianificazione del browser, come setTimeout, DevTools può tracciare le operazioni asincrone collegando entrambe le parti del codice asincrono.

In questo caso, l'analisi dello stack mostra la "storia completa" dell'operazione asincrona.

Mostra i frame di terze parti noti nelle analisi dello stack

Quando le mappe di origine includono il campo ignoreList, per impostazione predefinita, la console nasconde dalle analisi dello stack i frame di terze parti provenienti da origini generate da bundler (ad esempio webpack) o framework (ad esempio Angular).

Per visualizzare l'intera analisi dello stack, inclusi i frame di terze parti, fai clic su Mostra altri N frame nella parte inferiore dell'analisi dello stack.

Per visualizzare sempre l'intera analisi dello stack, disattiva l'impostazione Impostazioni > Elenco degli elementi da ignorare > Aggiungi automaticamente script di terze parti noti all'elenco degli elementi da ignorare.

Registra le richieste XHR e di recupero

Apri le impostazioni della console e attiva l'opzione Registra XMLHttpRequests per registrare tutte le richieste XMLHttpRequest e Fetch alla console man mano che vengono eseguite.

Il messaggio in alto nell'esempio precedente mostra il comportamento di raggruppamento predefinito della console. L'esempio seguente mostra l'aspetto dello stesso log dopo aver disattivato il raggruppamento dei messaggi.

Rendere persistenti i messaggi tra i caricamenti delle pagine

Per impostazione predefinita, la console viene cancellata ogni volta che carichi una nuova pagina. Per rendere persistenti i messaggi durante i caricamenti di pagina, apri le impostazioni della console e poi attiva la casella di controllo Preserve Log.

Nascondere i messaggi di rete

Per impostazione predefinita, il browser registra i messaggi di rete nella console. Ad esempio, il messaggio in alto nell'esempio seguente rappresenta un errore 404.

Per nascondere i messaggi della rete:

1. Apri le impostazioni della console.
2. Attiva la casella di controllo Nascondi rete.

Mostrare o nascondere gli errori CORS

La console può mostrare errori CORS se le richieste di rete non vanno a buon fine a causa della condivisione delle risorse tra origini (CORS).

Per mostrare o nascondere gli errori CORS:

1. Apri le impostazioni della console.
2. Seleziona o deseleziona la casella di controllo Mostra gli errori CORS nella console.

Se la console è impostata per mostrare gli errori CORS e li riscontri, puoi fare clic sui seguenti pulsanti accanto agli errori:

• per aprire la richiesta con un TypeError correlato a CORS nel riquadro Rete.
• per visualizzare una soluzione potenziale nella scheda Problemi.

Filtra i messaggi

Esistono molti modi per filtrare i messaggi nella console.

Filtrare i messaggi del browser

Apri la barra laterale della console e fai clic su Messaggi utente per visualizzare solo i messaggi provenienti dal codice JavaScript della pagina.

Filtra per livello di log

DevTools assegna livelli di gravità alla maggior parte dei metodi console.*.

Esistono quattro livelli:

• Verbose
• Info
• Warning
• Error

Ad esempio, console.log() fa parte del gruppo Info, mentre console.error() fa parte del gruppo Error. Il riferimento API della console descrive il livello di gravità di ogni metodo applicabile.

Ogni messaggio registrato dal browser nella console ha anche un livello di gravità. Puoi nascondere qualsiasi livello di messaggi che non ti interessa. Ad esempio, se ti interessano solo i messaggi Error, puoi nascondere gli altri tre gruppi.

Fai clic sul menu a discesa Livelli di log per attivare o disattivare i messaggi Verbose, Info, Warning o Error.

Puoi anche filtrare per livello di log aprendo la barra laterale della console e poi facendo clic su Errori, Avvisi, Informazioni o Dettagliato.

Filtrare i messaggi per URL

Digita url: seguito da un URL per visualizzare solo i messaggi provenienti da quell'URL. Dopo aver digitato url: DevTools mostra tutti gli URL pertinenti.

Funzionano anche i domini. Ad esempio, se https://example.com/a.js e https://example.com/b.js registrano i messaggi, url:https://example.com ti consente di concentrarti sui messaggi di questi due script.

Per nascondere tutti i messaggi di un URL specifico, digita -url: seguito dall'URL, ad esempio https://b.wal.co. Questo è un filtro URL negativo.

Puoi anche mostrare i messaggi di un singolo URL aprendo la barra laterale della console, espandendo la sezione Messaggi utente e poi facendo clic sull'URL dello script contenente i messaggi su cui vuoi concentrarti.

Filtrare i messaggi di contesti diversi

Supponiamo che tu abbia un annuncio sulla tua pagina. L'annuncio è incorporato in un <iframe> e genera molti messaggi nella console. Poiché questo annuncio si trova in un contesto JavaScript diverso, un modo per nascondere i suoi messaggi è aprire le impostazioni della console e selezionare la casella di controllo Solo contesto selezionato.

Filtrare i messaggi che non corrispondono a un pattern di espressione regolare

Digita un'espressione regolare come /[foo]\s[bar]/ nella casella di testo Filtro per filtrare tutti i messaggi che non corrispondono a questo pattern. Gli spazi non sono supportati. Utilizza \s. DevTools controlla se il pattern viene trovato nel testo del messaggio o nello script che ha causato la registrazione del messaggio.

Ad esempio, il seguente filtro esclude tutti i messaggi che non corrispondono a /[gm][ta][mi]/.

Cercare testo nei log

Per cercare testo nei messaggi di log:

1. Per aprire una barra di ricerca integrata, premi Comando+F (Mac) o Ctrl+F (Windows, Linux).
2. Nella barra, digita la query. In questo esempio, la query è legacy. In alternativa, puoi:
   • Fai clic su Maiuscole/minuscole per rendere la query sensibile alle maiuscole.
   • Fai clic su Usa espressione regolare per eseguire la ricerca utilizzando un'espressione RegEx.
3. Premi Invio. Per passare al risultato di ricerca precedente o successivo, premi il pulsante Su o Giù.

Esegui JavaScript

Questa sezione contiene funzionalità relative all'esecuzione di JavaScript nella console. Per una procedura dettagliata pratica, consulta Eseguire JavaScript.

Opzioni di copia delle stringhe

Per impostazione predefinita, la console restituisce le stringhe come valori letterali JavaScript validi. Fai clic con il tasto destro del mouse su un output e scegli tra tre opzioni di copia:

• Copia come valore letterale JavaScript. Esegue l'escape dei caratteri speciali appropriati e racchiude la stringa tra virgolette singole, virgolette doppie o apici inversi a seconda del contenuto.
• Copia i contenuti della stringa. Copia la stringa esatta non elaborata negli appunti, inclusi i nuovi righi e altri caratteri speciali.
• Copia come valore letterale JSON. Formatta la stringa in JSON valido.

Eseguire di nuovo le espressioni precedenti e cancellare la cronologia

Premi il tasto Freccia su per scorrere la cronologia delle espressioni JavaScript che hai eseguito in precedenza nella console. Premi Invio per eseguire di nuovo l'espressione.

Per cancellare la cronologia della console, fai clic con il tasto destro del mouse su uno spazio vuoto nella console e seleziona Cancella cronologia della console dal menu contestuale.

Cancellare, copiare, espandere, comprimere e salvare i messaggi

Per cancellare la finestra Console, esegui una delle seguenti operazioni:

• Fai clic su Blocca Cancella console nella barra delle azioni in alto.
• Premi Ctrl+L o Cmd+K.
• Fai clic con il tasto destro del mouse su uno spazio vuoto nella console e seleziona Cancella console dal menu contestuale.

Per espandere o comprimere tutti i messaggi, fai clic su espandi Espandi tutto o comprimi Comprimi tutto nella barra delle azioni in alto.

Dal menu contestuale puoi anche:

• Copia console: copia tutti i messaggi attuali negli appunti, ma non la cronologia dei comandi precedenti.
• Salva con nome… Salva tutti i messaggi correnti in un file .log di testo normale.

Guarda il valore di un'espressione in tempo reale con Live Expressions

Se ti ritrovi a digitare ripetutamente la stessa espressione JavaScript nella console, potresti trovare più semplice creare un'espressione live. Con Live Expressions, digiti un'espressione una sola volta e poi la blocchi nella parte superiore della console. Il valore dell'espressione viene aggiornato quasi in tempo reale. Consulta Visualizzare i valori delle espressioni JavaScript in tempo reale con le espressioni live.

Disattivare la valutazione eager

Mentre digiti le espressioni JavaScript nella console, la valutazione eager mostra un'anteprima del valore restituito dell'espressione. Apri le impostazioni della console e disattiva la casella di controllo Valutazione eager per disattivare le anteprime dei valori restituiti.

Attivare l'attivazione utente con la valutazione

L'attivazione utente è lo stato di una sessione di navigazione che dipende dalle azioni dell'utente. Lo stato "attivo" indica che l'utente sta interagendo con la pagina o ha interagito dopo il caricamento pagina.

Per attivare l'utente con qualsiasi valutazione, apri le impostazioni della console e seleziona Tratta la valutazione del codice come azione dell'utente.

Disattivare il completamento automatico dalla cronologia

Mentre digiti un'espressione, il popup di completamento automatico della console mostra le espressioni che hai eseguito in precedenza. Queste espressioni sono precedute dal carattere >. Nell'esempio seguente, DevTools ha valutato in precedenza document.querySelector('a') e document.querySelector('img').

Apri le impostazioni della console e deseleziona la casella di controllo Completa automaticamente dalla cronologia per interrompere la visualizzazione delle espressioni della cronologia.

Seleziona il contesto JavaScript

Per impostazione predefinita, il menu a discesa Contesto JavaScript è impostato su top, che rappresenta il contesto di navigazione del documento principale.

Supponiamo che nella tua pagina sia incorporato un annuncio in un <iframe>. Vuoi eseguire JavaScript per modificare il DOM dell'annuncio. Per farlo, devi prima selezionare il contesto di navigazione dell'annuncio dal menu a discesa Contesto JavaScript.

Esaminare le proprietà dell'oggetto

La console può visualizzare un elenco interattivo delle proprietà di un oggetto JavaScript specificato.

Per sfogliare l'elenco, digita il nome dell'oggetto in Console e premi Invio.

Per esaminare le proprietà degli oggetti DOM, segui i passaggi descritti in Visualizzare le proprietà degli oggetti DOM.

Individuare le proprietà proprie e ereditate

La console ordina prima le proprietà degli oggetti e le evidenzia in grassetto.

Le proprietà ereditate dalla catena di prototipi sono in carattere normale. La console li visualizza sull'oggetto stesso valutando gli accessor nativi corrispondenti degli oggetti incorporati.

Valutare gli accessor personalizzati

Per impostazione predefinita, DevTools non valuta gli accessor creati. Per valutare un accessor personalizzato su un oggetto, fai clic su (...).

Individuare proprietà enumerabili e non enumerabili

Le proprietà enumerabili sono di colore chiaro. Le proprietà non enumerabili sono disattivate. Le proprietà enumerabili possono essere iterate con il ciclo for … in o il metodo Object.keys().

Individuare le proprietà private delle istanze di classe

La console indica le proprietà private delle istanze di classe con un prefisso #.

La Console può anche completare automaticamente le proprietà private anche quando le valuti al di fuori dell'ambito della classe.

Ispezionare le proprietà JavaScript interne

Prendendo in prestito la notazione ECMAScript, la console racchiude alcune proprietà interne a JavaScript tra doppie parentesi quadre. Non puoi interagire con queste proprietà nel codice. Tuttavia, potrebbe essere utile esaminarli.

Potresti visualizzare le seguenti proprietà interne su oggetti diversi:

• Qualsiasi oggetto ha un [[Prototype]].
• I wrapper primitivi hanno una proprietà [[PrimitiveValue]].
• Gli oggetti ArrayBuffer hanno le seguenti proprietà:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Oltre alle proprietà specifiche di ArrayBuffer, gli oggetti WebAssembly.Memory hanno una proprietà [[WebAssemblyMemory]].
• Le raccolte con chiave (mappe e insiemi) hanno una proprietà [[Entries]] che contiene le voci con chiave.
• Gli oggetti Promise hanno le seguenti proprietà:
  • [[PromiseState]]: in attesa, completato o rifiutato
  • [[PromiseResult]]: undefined se in attesa, <value> se completato, <reason> se rifiutato
• Proxy Gli oggetti hanno le seguenti proprietà: oggetto [[Handler]], oggetto [[Target]] e [[isRevoked]] (attivo o meno).

Funzioni di ispezione

In JavaScript, le funzioni sono anche oggetti con proprietà. Tuttavia, se digiti il nome di una funzione nella console, DevTools la chiama anziché visualizzarne le proprietà.

Per visualizzare le proprietà della funzione interne a JavaScript, utilizza il comando console.dir().

Le funzioni hanno le seguenti proprietà:

• [[FunctionLocation]]. Un link alla riga con la definizione della funzione in un file sorgente.
• [[Scopes]]. Elenca i valori e le espressioni a cui la funzione ha accesso. Per esaminare gli ambiti delle funzioni durante il debug, consulta Visualizzare e modificare le proprietà locali, di chiusura e globali.
• Le funzioni associate hanno le seguenti proprietà:
  • [[TargetFunction]]. Il target di bind().
  • [[BoundThis]]. Il valore di this.
  • [[BoundArgs]]. Un array di argomenti della funzione.
• Le funzioni di generazione sono contrassegnate da una proprietà [[IsGenerator]]: true.
• I generatori restituiscono oggetti iteratore e hanno le seguenti proprietà:
  • [[GeneratorLocation]]. Un link a una riga con la definizione del generatore in un file di origine.
  • [[GeneratorState]]: suspended, closed o running.
  • [[GeneratorFunction]]. Il generatore che ha restituito l'oggetto.
  • [[GeneratorReceiver]]. Un oggetto che riceve il valore.

Svuotare la console

Puoi utilizzare uno dei seguenti workflow per cancellare la console:

• Fai clic su Cancella console .
• Fai clic con il tasto destro del mouse su un messaggio e poi seleziona Cancella console.
• Digita clear() nella console e premi Invio.
• Chiama console.clear() dal JavaScript della tua pagina web.
• Premi Ctrl+L mentre la console è attiva.