In questa pagina viene spiegato in che modo la console Chrome DevTools semplifica lo sviluppo di pagine web. La console ha due utilizzi principali: visualizzare i messaggi registrati e eseguire JavaScript.
Visualizzazione dei messaggi registrati
Gli sviluppatori web spesso registrano messaggi nella console per assicurarsi che JavaScript funzioni come
previsto. Per registrare un messaggio, inserisci un'espressione come console.log('Hello, Console!') nel
JavaScript. Quando il browser esegue il codice JavaScript e vede un'espressione del genere, sa
che deve registrare il messaggio nella console. Ad esempio, supponiamo che ti trovi nella
processo di scrittura dei codici HTML e 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 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.
- Esamina i valori delle variabili in un determinato momento.
Consulta la guida introduttiva ai messaggi di Logging per fare pratica con il logging. Visita la console
Riferimento API per sfogliare l'elenco completo dei metodi console. La differenza principale tra
è la modalità di visualizzazione dei dati che registri.
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 ai dati
window DevTools offre alcune pratiche funzioni che semplificano l'ispezione di una pagina. Per
Supponiamo, ad esempio, che il codice JavaScript contenga una funzione denominata hideModal. Esecuzione
debug(hideModal) mette in pausa il codice sulla prima riga di hideModal alla successiva chiamata.
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
metodo di array JavaScript map() e a cui vuoi fare un esperimento. La console è un buon
posto per provare la funzione.
Consulta Iniziare a eseguire JavaScript per acquisire esperienza pratica sull'esecuzione di JavaScript in la console.