In questa pagina viene spiegato in che modo la console Chrome DevTools semplifica lo sviluppo di pagine web. La console ha due utilizzi principali: la visualizzazione dei messaggi registrati e l'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!') in JavaScript. Quando il browser esegue il tuo JavaScript e vede un'espressione simile, sa che deve registrare il messaggio nella console. Ad esempio, supponiamo che tu stia scrivendo il codice HTML e JavaScript per 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 il caricamento della pagina e aver atteso 3 secondi. Prova a capire quali righe di codice hanno causato la registrazione dei messaggi da parte del 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.
- L'analisi dei valori delle variabili in un determinato momento.
Consulta la sezione Introduzione ai messaggi di Logging per fare pratica con il logging. Consulta la documentazione di riferimento per l'API console per sfogliare l'elenco completo dei metodi console. La differenza principale tra i metodi sta nel modo in cui visualizzano i dati che stai registrando.
Esecuzione di JavaScript
Anche la console è una REPL. Puoi eseguire JavaScript nella console per interagire con la pagina che stai ispezionando. Ad esempio, nella Figura 2 viene mostrata la console accanto alla home page di DevTools e nella Figura 3 viene mostrata la stessa pagina dopo averla utilizzata per cambiare il titolo.
Figura 2. Il riquadro Console accanto alla home page di DevTools.
Figura 3. Utilizzare la 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 funzioni utili che semplificano l'ispezione di una pagina. Ad esempio, supponiamo che il file JavaScript contenga una funzione denominata hideModal. L'esecuzione
debug(hideModal) mette in pausa il codice nella prima riga di hideModal la volta successiva che viene richiamato.
Per l'elenco completo delle funzioni di utilità, consulta la documentazione di riferimento sull'API Console Utilities.
Quando esegui JavaScript non devi interagire con la pagina. Puoi usare la console per provare
il nuovo codice non correlato alla pagina. Ad esempio, supponi di aver appena imparato il metodo
JavaScript Array integrato map() e di voler fare delle prove. La console è un buon posto
per provare la funzione.
Consulta la pagina Introduzione all'esecuzione di JavaScript per fare pratica con l'esecuzione di JavaScript nella console.