Introduzione

La console e gli strumenti di sviluppo integrati nei browser sono fondamentali per chi lavora con JavaScript. Permettono di osservare errori, testare comandi, analizzare il codice HTML/CSS e monitorare le performance della pagina.

• Console: spazio per messaggi, errori e test.
• Ispeziona/Analizza: per analizzare e modificare l’HTML e il CSS.
• Debugger: per fermare e analizzare l’esecuzione del codice.
• Network: per monitorare le richieste al server.

Console JavaScript

La console permette di eseguire direttamente comandi JavaScript e visualizzare output. Vediamo un esempio:

Codice Esempio: utilizzo della console

CODE: Javascript

1. let nome = "Anna";

2. console.log("Ciao " + nome);

3. console.warn("Attenzione, questo è un avviso");

4. console.error("Errore simulato");

6. // Output in console:

7. // Ciao Anna

8. // Attenzione, questo è un avviso

9. // Errore simulato

Debugging

Con il debugger possiamo inserire un’istruzione debugger; nel codice. Questo blocca l’esecuzione in quel punto e permette di analizzare variabili e flusso.

Codice Esempio: uso di debugger

CODE: Javascript

1. function somma(a, b) {

2.   debugger; // esecuzione si interrompe qui nel DevTools

3.   return a + b;

4. }

6. let risultato = somma(5, 7);

7. console.log("Risultato:", risultato);

9. // Nota: l'esecuzione si ferma su "debugger;".

10. // Dopo aver cliccato "Resume" nel DevTools, l'output sarà:

11. // Risultato: 12

Tabella riassuntiva

Considerazioni

L’uso costante della console e degli strumenti del browser è indispensabile per capire cosa succede nel codice e correggere errori velocemente. Un buon sviluppatore sfrutta questi strumenti in ogni fase del lavoro.