In questa pagina viene spiegato in che modo la console Chrome DevTools semplifica lo sviluppo di pagine web. La console ha due utilizzi principali: visualizzazione dei messaggi registrati ed esecuzione di JavaScript.
Visualizzazione dei messaggi registrati
Gli sviluppatori web spesso registrano messaggi nella console per assicurarsi che JavaScript funzioni come previsto. Per registrare un messaggio, devi inserire un'espressione come console.log('Hello, Console!') nel tuo
JavaScript. Quando il browser esegue il codice JavaScript e vede un'espressione di questo tipo, sa
che deve registrare il messaggio nella console. Ad esempio, supponiamo che tu stia scrivendo il codice
HTML e il codice JavaScript di una pagina:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
La Figura 1 mostra l'aspetto della console dopo aver caricato la pagina e aver atteso 3 secondi. Prova a capire quali righe di codice hanno provocato la registrazione dei messaggi nel browser.
Figura 1. Il riquadro Console.
Gli sviluppatori web registrano i messaggi per due motivi generali:
- Assicurarsi che il codice venga eseguito nell'ordine corretto.
- Esamina i valori delle variabili in un determinato momento.
Consulta la guida introduttiva ai messaggi di Logging per fare pratica con il logging. Consulta Riferimento API Console per sfogliare l'elenco completo dei metodi console. La differenza principale tra questi metodi è il modo in cui visualizzano i dati che stai registrando.
Esecuzione di JavaScript
La console è anche un REPL. Puoi eseguire JavaScript nella console per interagire con la pagina che stai ispezionando. Ad esempio, la Figura 2 mostra la console accanto alla home page di DevTools e la Figura 3 mostra la stessa pagina dopo aver utilizzato la console per modificare il titolo della pagina.
Figura 2. Il riquadro Console accanto alla home page di DevTools.
Figura 3. Utilizzo della console per modificare il titolo della pagina.
È possibile modificare la pagina dalla console perché quest'ultima ha accesso completo all'elemento window della pagina. DevTools offre alcune pratiche funzioni che semplificano l'ispezione di una pagina. Ad esempio, supponiamo che il tuo codice JavaScript contenga una funzione denominata hideModal. L'esecuzione di debug(hideModal) mette in pausa il codice sulla prima riga di hideModal la prossima volta che viene chiamato.
Consulta la pagina di riferimento dell'API Console Utilities per visualizzare l'elenco completo delle funzioni delle utilità.
Quando esegui JavaScript non devi interagire con la pagina. Puoi usare la console per provare
nuovo codice non correlato alla pagina. Ad esempio, supponiamo che tu abbia appena imparato a conoscere il metodo di array JavaScript integrato map() e che voglia fare un esperimento. La console è il posto giusto
per provare la funzione.
Consulta la sezione Iniziare a eseguire JavaScript per fare pratica con l'esecuzione di JavaScript nella console.