Riferimento alle funzionalità della console

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

Se stai cercando il riferimento dell'API su funzioni come console.log(), consulta la sezione Riferimento API della console. Per informazioni su funzioni come monitorEvents(), consulta la sezione Riferimento API Console Utilities.

Apri la console

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

Apri il riquadro Console

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

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

Apri la console nel riquadro a scomparsa

Premi Esc o fai clic su Personalizza e controlla DevTools , quindi seleziona Mostra riquadro a scomparsa della console.

Il riquadro a scomparsa appare nella parte inferiore della finestra DevTools con la scheda Console.

Per aprire la scheda Console dal menu Comando, inizia a digitare Console, quindi esegui il comando Mostra console accanto al badge Riquadro a scomparsa.

Apri le impostazioni della console

Fai clic su Impostazioni della 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 messaggi simili nella console
• Mostra gli errori CORS nella console
• Registra 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 l'applicazione di filtri.

visualizza i messaggi

Questa sezione contiene funzionalità che cambiano il modo in cui i messaggi vengono presentati nella console. Per una procedura dettagliata pratica, vedi Visualizzare i messaggi.

Disattiva raggruppamento dei messaggi

Apri le Impostazioni della console e disabilita Gruppo simile per disattivare il comportamento di raggruppamento dei messaggi predefinito della console. Per un esempio, consulta Registrazione di richieste XHR e di recupero.

Visualizzare i messaggi dai punti di interruzione

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

• console.* chiamate in punti di interruzione condizionali con un punto interrogativo arancione ?
• Messaggi dei punto di log con due puntini rosa ..

Per passare all'editor dei punti di interruzione incorporati nel riquadro Origini, fai clic sul link di ancoraggio accanto al messaggio dei punti di interruzione.

Visualizza analisi dello stack

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

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

Visualizza le cause degli errori nelle analisi dello stack

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

Per semplificare il debug, puoi specificare le cause degli errori quando rilevi e ripeti gli errori. Man mano che la console percorre la catena di cause, visualizza ogni serie di errori con un prefisso Caused by:, in modo da poter trovare l'errore originale.

Visualizza analisi dello stack asincrone

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

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

Mostra 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 dalle origini generate dai bundler (ad esempio il webpack) o dai framework (ad esempio Angular).

Per visualizzare l'analisi completa 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'analisi completa dello stack, disattiva l'impostazione Impostazioni > Ignora elenco > Aggiungi automaticamente script di terze parti noti per l'elenco di elementi da ignorare.

Registra richieste XHR e Fetch

Apri le impostazioni della console e abilita Registra XMLHttpRequests per registrare tutte le richieste XMLHttpRequest eFetch alla console nel momento in cui si verificano.

Il messaggio principale nell'esempio riportato sopra mostra il comportamento di raggruppamento predefinito della console. L'esempio seguente mostra l'aspetto dello stesso log dopo la disattivazione del raggruppamento dei messaggi.

Mantieni i messaggi tra i caricamenti pagina

Per impostazione predefinita, la console si cancella ogni volta che carichi una nuova pagina. Per mantenere i messaggi tra i caricamenti pagina, apri le impostazioni della console e abilita la casella di controllo Conserva log.

Nascondi 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 di rete:

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

Mostra o nascondi 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 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 relativo a CORS nel riquadro Rete.
• per trovare una potenziale soluzione 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 per gli utenti per visualizzare solo i messaggi provenienti dal codice JavaScript della pagina.

Filtra per livello di log

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

Ci sono quattro livelli:

• Verbose
• Info
• Warning
• Error

Ad esempio, console.log() è nel gruppo Info, mentre console.error() è nel gruppo Error. La sezione Riferimento API della console descrive il livello di gravità di ogni metodo applicabile.

Ogni messaggio che il browser registra 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 sull'elenco 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 facendo clic su Errori, Avvisi, Informazioni o Dettaglio.

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

Anche i domini funzionano. 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 provenienti da un URL specificato, digita -url: seguito dall'URL, ad esempio https://b.wal.co. Questo è un filtro per URL escluso.

Puoi anche mostrare i messaggi provenienti da un singolo URL aprendo la barra laterale della console, espandendo la sezione Messaggi per gli utenti e facendo clic sull'URL dello script che contiene i messaggi su cui vuoi concentrarti.

Filtrare i messaggi provenienti da contesti diversi

Supponiamo che sulla tua pagina sia presente un annuncio. L'annuncio è incorporato in un <iframe> e sta generando molti messaggi nella tua console. Poiché questo annuncio si trova in un contesto JavaScript diverso, un modo per nascondere i relativi messaggi consiste nell'aprire le Impostazioni della console e selezionare la casella di controllo Solo contesto selezionato.

Filtra i messaggi che non corrispondono a un modello di espressione regolare

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

Ad esempio, la procedura seguente filtra tutti i messaggi che non corrispondono a /[gm][ta][mi]/.

Cerca 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. Digita la query nella barra. In questo esempio la query è legacy. Se vuoi, puoi:
   • Fai clic su Maiuscole/minuscole per fare in modo che la query faccia distinzione tra maiuscole e minuscole.
   • Fai clic su Utilizza espressione regolare per eseguire ricerche 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 la sezione Esecuzione di 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 una delle tre opzioni di copia:

• Copia come valore letterale JavaScript. Esegue l'escape dei caratteri speciali appropriati e inserisce la stringa tra virgolette singole, virgolette doppie o accento grave, a seconda del contenuto.
• Copia il contenuto della stringa. Copia negli appunti la stringa non elaborata esatta, inclusi nuovi caratteri e altri caratteri speciali.
• Copia come valore letterale JSON. Formatta la stringa in un JSON valido.

Esegui di nuovo le espressioni dalla 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.

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 dal vivo. Con Espressioni dal vivo, puoi digitare un'espressione una volta e poi bloccarla nella parte superiore della console. Il valore dell'espressione viene aggiornato quasi in tempo reale. Consulta la pagina relativa alla visualizzazione dei valori delle espressioni JavaScript in tempo reale con le espressioni live.

Disabilita valutazione Eager

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

Attiva l'attivazione utente con la valutazione

L'attivazione utente è lo stato di una sessione di navigazione che dipende dalle azioni degli utenti. Se lo stato è "attivo", significa che l'utente sta interagendo con la pagina o dal momento del caricamento della pagina.

Per attivare l'attivazione utente con qualsiasi valutazione, apri Impostazioni della console e seleziona Valuta attiva l'attivazione dell'utente.

Disattiva il completamento automatico dalla cronologia

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

Apri le impostazioni della console e disabilita la casella di controllo Completamento automatico dalla cronologia per interrompere la visualizzazione delle espressioni della cronologia.

Seleziona contesto JavaScript

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

Supponi di avere un annuncio sulla tua pagina incorporato in un elemento <iframe>. Per modificare il DOM dell'annuncio, vuoi eseguire JavaScript. Per farlo, devi innanzitutto selezionare il contesto di navigazione dell'annuncio dal menu a discesa Contesto JavaScript.

Ispeziona le proprietà degli oggetti

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

Per sfogliare l'elenco, digita il nome dell'oggetto nella 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 ed ereditate

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

Le proprietà ereditate dalla catena di prototipi hanno un carattere normale. La console le visualizza nell'oggetto stesso valutando le funzioni di accesso native corrispondenti degli oggetti integrati.

valuta le funzioni di accesso personalizzate

Per impostazione predefinita, DevTools non valuta le funzioni di accesso create. Per valutare una funzione di accesso personalizzata su un oggetto, fai clic su (...).

Proprietà enumerabili e non enumerabili dello spot

Le proprietà numerabili hanno colori brillanti. Le proprietà non enumerabili sono disattivate. Le proprietà enumerabili possono essere iterate con il loop for … in o il metodo Object.keys().

Individua le proprietà private delle istanze di classe

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

Inoltre, la console può completare automaticamente le proprietà private anche quando le valuti al di fuori dell'ambito del corso.

Ispeziona le proprietà JavaScript interne

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

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]] e [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Oltre alle proprietà specifiche per ArrayBuffer, gli oggetti WebAssembly.Memory hanno una proprietà [[WebAssemblyMemory]].
• Le raccolte con chiave (mappe e set) hanno una proprietà [[Entries]] contenente le relative voci con chiave.
• Gli oggetti Promise hanno le seguenti proprietà:
  • [[PromiseState]]: in attesa, completata o rifiutata
  • [[PromiseResult]]: undefined se in attesa, <value> se completato, <reason> se rifiutato
• Gli oggetti Proxy hanno le seguenti proprietà: oggetto [[Handler]], oggetto [[Target]] e [[isRevoked]] (disattivato o meno).

Esaminare le funzioni

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 di origine.
• [[Scopes]]. Elenca i valori e le espressioni a cui la funzione ha accesso. Per esaminare gli ambiti delle funzioni durante il debug, vedi 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 delle funzioni.
• Le funzioni di generazione sono contrassegnate con una proprietà [[IsGenerator]]: true.
• I generatori restituiscono oggetti iteratori 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

Per cancellare i dati della console, puoi utilizzare uno qualsiasi dei seguenti flussi di lavoro:

• Fai clic su Cancella console .
• Fai clic con il tasto destro del mouse su un messaggio e seleziona Cancella console.
• Digita clear() nella console e premi Invio.
• Richiama console.clear() dal codice JavaScript della tua pagina web.
• Premi Ctrl+L con lo stato attivo sulla console.