Setup dell'ambiente di laboratorio

In parole semplici

Per debuggare servono tre cose che lavorano insieme: un browser che mostri la pagina, un editor che scriva il codice e un terminale che esegua comandi. Quando questi tre parlano la stessa lingua e mostrano gli stessi errori, sei pronto per il laboratorio.

Questa lezione costruisce la postazione minima. Niente fronzoli, niente plugin esotici. Solo strumenti che useremo in ogni modulo successivo.

Parole nuove

• DevTools: pannello del browser per ispezionare, profilare e debuggare.
• runtime: ambiente che esegue il codice (browser, Node.js, interprete Python).
• linter: programma che segnala errori nel codice mentre scrivi.
• terminale (shell): finestra testuale per dare comandi al sistema operativo.

Cosa impari

• Aprire DevTools in browser moderni.
• Installare ed eseguire Node.js per provare JavaScript fuori dal browser.
• Configurare un editor con linter attivo.
• Eseguire lo stesso programma in tre contesti diversi e confrontare l’output.

Browser moderno e DevTools

Usa un browser aggiornato negli ultimi 30 giorni: Chrome, Firefox, Safari o Edge.

Apri DevTools con:

• Mac: Cmd + Option + I
• Windows / Linux: Ctrl + Shift + I o tasto F12

Tab da memorizzare:

• Console: esegui codice e leggi messaggi.
• Sources (Chrome/Edge) / Debugger (Firefox/Safari): metti breakpoint e fermi il programma.
• Network: vedi richieste HTTP.
• Application (Chrome/Edge) / Storage (Firefox/Safari): osservi cosa il browser conserva.

In console scrivi:

"ciao " + "laboratorio"

Premi Invio. Deve apparire 'ciao laboratorio'. Se non funziona, il browser non sta eseguendo JavaScript: chiudi e riapri DevTools.

Editor con linter

Va bene VS Code (gratuito, multipiattaforma) o qualunque editor con cui ti trovi.

Installa una sola estensione per ora: il linter del linguaggio che userai. Per JavaScript è ESLint. Da terminale, in una cartella di prova:

mkdir laboratorio-debug
cd laboratorio-debug
npm init -y
npm install --save-dev eslint
npx eslint --init

Rispondi alle domande in modo “minimo” (ambiente browser + Node, JavaScript, nessun framework). Crea un file test.js con un errore voluto:

const x = 5
const x = 10

L’editor deve sottolineare la riga e dire qualcosa tipo Identifier 'x' has already been declared. Se non lo fa, il linter non è collegato: verifica che l’estensione ESLint dell’editor sia attiva.

Terminale e Node.js

Installa Node.js LTS dal sito ufficiale (versione 20.x o superiore). Verifica:

node --version
npm --version

Devi vedere due numeri. Se uno dei due dà errore, il PATH non è configurato: riavvia il terminale o, su Windows, esci e rientra dall’account.

Crea prova.js:

const numeri = [1, 2, 3, 4];
const somma = numeri.reduce((acc, n) => acc + n, 0);
console.log("Somma:", somma);

Esegui:

node prova.js

Output atteso:

Somma: 10

Esercizio guidato: lo stesso programma in tre contesti

1. Console del browser: incolla le tre righe sopra in DevTools → Console. Output identico.
2. Editor: salva il file prova.js ed eseguilo con node prova.js dal terminale.
3. Terminale puro: copia e incolla in node interattivo (digita node da solo, premi Invio, incolla riga per riga).

Nei tre contesti deve apparire Somma: 10. Se in uno solo dei tre vedi qualcosa di diverso, qualcosa nel setup non torna. Annota quale e perché.

Cartella di lavoro consigliata

laboratorio-debug/
├── 00-fondamenta/
├── 01-riprodurre/
├── 02-leggere-errori/
└── README.md

Una sottocartella per modulo, un README con la data, il problema studiato, l’esito. Diventerà il tuo archivio del corso.

Errori frequenti del principiante

• Installare 12 estensioni “consigliate online” prima di scrivere una riga. Più estensioni = più sorgenti di malfunzionamento. Una per linguaggio, basta.
• Aprire DevTools solo quando qualcosa va male. Tienilo aperto sempre, anche quando va bene. Si imparano gli strumenti familiarizzandoci, non in emergenza.
• Confondere node con il browser. Il browser ha window e document, Node no. Stesso linguaggio, due ambienti diversi.
• Saltare il linter. Senza linter scopri compile-time error solo dopo l’esecuzione. È esattamente ciò che il corso vuole evitare.