Riferimento alle funzionalità della console

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

Se cerchi il riferimento per l'API su funzioni come console.log(), consulta la documentazione di riferimento per l'API della console. Per informazioni su funzioni come monitorEvents(), consulta la sezione relativa all'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 il badge Riquadro accanto.

Apri la console nel riquadro a scomparsa

Premi Esc o fai clic su Personalizza e controlla DevTools e poi seleziona Mostra riquadro a scomparsa 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, quindi esegui il comando Mostra console con accanto il badge Riquadro a scomparsa.

Apri le impostazioni della console

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

I link riportati di seguito illustrano ciascuna impostazione:

• Nascondi rete
• Conserva log
• Solo contesto selezionato
• Raggruppa messaggi simili nella console
• Mostra gli errori CORS nella console
• Registra XMLHttpRequests
• Valutazione impaziente
• 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. Vedi Visualizzare i messaggi per una procedura dettagliata.

Disattiva raggruppamento dei messaggi

Apri le impostazioni della console e disattiva Gruppo simile per disattivare il comportamento di raggruppamento dei messaggi predefinito della console. Per un esempio, vedi Log XHR and Fetch requests (Registra richieste XHR e recupero).

Visualizzare i messaggi dai punti di interruzione

Nella console i messaggi attivati dai punti di interruzione vengono contrassegnati nel seguente modo:

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

Per passare all'editor dei punti di interruzione in linea nel riquadro 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 funzioni (frame) che hanno generato l'errore o l'avviso. Nella console vengono mostrate in ordine inverso: il frame più recente si trova in alto.

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

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

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

Registra richieste XHR e Fetch

Apri le impostazioni della console e attiva Log XMLHttpRequests per registrare tutte le richieste XMLHttpRequest eFetch nella console nel momento in cui si verificano.

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 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 rendere persistenti 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 elemento TypeError relativo a CORS nel riquadro Rete.
• per trovare una potenziale soluzione nella scheda Problemi.

Filtra i messaggi

Esistono diversi modi per filtrare i messaggi nella console.

Filtrare i messaggi del browser

Apri la barra laterale della console e fai clic su Messaggi degli 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.*.

Esistono 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 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 facendo clic su Errori, Avvisi, Informazioni o Dettagliato.

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 stanno registrando messaggi, url:https://example.com ti consente di concentrarti sui messaggi provenienti da 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 degli 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 ci sia un annuncio. L'annuncio è incorporato in un <iframe> e sta generando molti messaggi nella tua console. Poiché l'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, quanto segue 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. Facoltativamente, puoi:
   • Fai clic su Maiuscole/minuscole per fare distinzione tra maiuscole e minuscole per la query.
   • Fai clic su Utilizza 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. Consulta Esecuzione di JavaScript per una procedura dettagliata.

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 racchiudi la stringa tra virgolette singole, virgolette doppie o apici inversi, a seconda del contenuto.
• Copia i contenuti della stringa. Copia la stringa non elaborata esatta negli appunti, incluse le nuove righe 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 le espressioni dal vivo

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 Guardare i valori delle espressioni JavaScript in tempo reale con le espressioni dal vivo.

Disabilita valutazione Eager

Durante la digitazione delle espressioni JavaScript nella console, Eager Evaluation 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 dell'utente. Uno stato "attivo" indica che l'utente sta interagendo o interagendo con la pagina dal suo caricamento.

Per attivare l'attivazione utente con qualsiasi valutazione, apri Impostazioni console e seleziona Valuta attiva l'attivazione 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 in precedenza ha valutato 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 nella cronologia.

Seleziona 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 ci sia un annuncio incorporato in un <iframe>. Per modificare il DOM dell'annuncio, vuoi eseguire JavaScript. A tale scopo, 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à proprietarie ed ereditate

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

Le proprietà ereditate dalla catena di prototipi sono utilizzate con caratteri regolari. Nella console vengono visualizzate 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 da te. Per valutare una funzione di accesso personalizzata su un oggetto, fai clic su (...).

Proprietà numerabili e non enumerabili degli spot

Le proprietà enumerabili hanno colori brillanti. L'audio delle proprietà non enumerabili è disattivato. 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 designa le proprietà private delle istanze di classe con un prefisso #.

La console può inoltre completare automaticamente le proprietà private, anche se 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 a JavaScript tra parentesi quadre doppie. Non puoi interagire con queste proprietà nel codice. Tuttavia, potrebbe essere utile ispezionarli.

Potresti vedere le seguenti proprietà interne su diversi oggetti:

• Qualsiasi oggetto ha un [[Prototype]].
• I wrapper primitivi hanno una proprietà [[PrimitiveValue]].
• ArrayBuffer oggetti 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.
• Promise oggetti hanno le seguenti proprietà:
  • [[PromiseState]]: in attesa, completato o rifiutato
  • [[PromiseResult]]: undefined se in attesa, <value> se completata, <reason> se rifiutata
• Gli oggetti Proxy hanno le seguenti proprietà: oggetto [[Handler]], oggetto [[Target]] e [[isRevoked]] (disattivato o meno).

Ispeziona 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 controllare 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 di funzione.
• 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.

Cancella i dati dalla 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.
• Chiama console.clear() dal codice JavaScript della tua pagina web.
• Premi Ctrl+L mentre la console è attiva.