W3docs
it
Accedi

Debug e Strumenti nello Sviluppo Web

Impara a fare il debug di JavaScript che manipola il DOM con i DevTools del browser: ispeziona elementi, usa la console, imposta breakpoint e risolvi problemi comuni del DOM.

Quando uno script che lavora con il DOM si comporta in modo anomalo, il modo più rapido per scoprire perché è osservare la pagina dal punto di vista del browser. I DevTools del browser ti permettono di leggere il DOM live, mettere in pausa JavaScript durante l'esecuzione e vedere esattamente cosa fa ogni riga alla pagina.

Questa guida tratta quattro competenze pratiche: aprire e usare i DevTools, ispezionare gli elementi, registrare messaggi e procedere passo dopo passo nel codice DOM, e risolvere i pochi bug che causano la maggior parte dei problemi con il DOM.

Usare i DevTools del Browser

Ispezionare il DOM

I DevTools del browser sono utilità integrate nei browser moderni per ispezionare e modificare il DOM live, fare il debug di JavaScript, monitorare le richieste di rete e misurare le prestazioni. I pannelli più utili per lavorare con il DOM sono:

  • Elements (Firefox: Inspector) — il DOM live e il CSS che si applica a ogni nodo.
  • Console — log, errori e un REPL dove puoi eseguire JavaScript sulla pagina corrente.
  • Sources (Firefox: Debugger) — i tuoi script, dove imposti i breakpoint e procedi passo dopo passo nel codice.

Un punto chiave che sorprende i principianti: il pannello Elements mostra il DOM live, non l'HTML che hai scritto. Se il tuo script aggiunge, rimuove o riscrive nodi, il pannello Elements riflette il risultato dopo l'esecuzione dello script — ed è esattamente quello che vuoi quando fai il debug della manipolazione del DOM.

Come Aprire i DevTools

  • Chrome: Fai clic destro sulla pagina e seleziona "Ispeziona", oppure premi Ctrl+Shift+I (Windows/Linux) o Cmd+Opt+I (Mac).
  • Firefox: Fai clic destro sulla pagina e seleziona "Ispeziona elemento", oppure premi Ctrl+Shift+I (Windows/Linux) o Cmd+Opt+I (Mac).
  • Safari: Abilita il menu Sviluppo nelle Preferenze, quindi seleziona "Mostra Web Inspector" dal menu Sviluppo.

Ispezionare gli Elementi

Il pannello "Elements" ti permette di ispezionare e modificare l'HTML e il CSS di una pagina web in tempo reale.

<!DOCTYPE html>
<html>
<head>
    <title>Inspecting Elements</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content">This is some content.</div>
    <script>
        document.querySelector('.content').classList.add('highlight');
    </script>
</body>
</html>
Provalo tu stesso »

Usa il pannello Elements (premi F12 per aprire l'Inspector, poi vai alla scheda Elements) per ispezionare l'elemento <div class="content"> e verificare che la classe .highlight sia applicata.

Debug di JavaScript che Manipola il DOM

Usare la Console

La console è lo strumento di debug più rapido: inserisci un'istruzione di log, ricarica la pagina e leggi l'output. Oltre al classico console.log(), diversi metodi rendono il debug del DOM molto più chiaro:

  • console.log() — output generico; passa più argomenti e vengono stampati affiancati.
  • console.error() / console.warn() — messaggi stilizzati in rosso/giallo facili da individuare e filtrabili.
  • console.dir(node) — stampa un nodo DOM come oggetto JavaScript così puoi espanderne le proprietà, anziché come HTML (che è ciò che mostra console.log(node)).
  • console.table(data) — visualizza array e object come una tabella ordinabile.
  • console.assert(condition, msg) — registra solo quando la condizione è false, perfetto per controlli di integrità.
  • console.count(label) — conta quante volte viene eseguita una riga, utile per individuare un event handler che si attiva troppo spesso.
const items = [
  { id: 1, name: 'Alpha' },
  { id: 2, name: 'Beta' },
];

console.log('Loaded items:', items.length); // Loaded items: 2
console.table(items);                        // sortable table of both rows
console.assert(items.length > 0, 'No items!'); // silent: condition is true
console.assert(items.length > 5, 'Too few items'); // logs the assertion message

Quando registri un nodo DOM, preferisci console.dir(el) per ispezionarne le proprietà (come el.dataset o el.classList) e console.log(el) per ispezionarne l'HTML renderizzato — mostrano due viste diverse dello stesso elemento.

Impostare i Breakpoint

I breakpoint ti permettono di mettere in pausa l'esecuzione di JavaScript in righe specifiche del codice per ispezionare variabili e il call stack.

Come Impostare i Breakpoint

  1. Apri il pannello "Sources" in Chrome o il pannello "Debugger" in Firefox.
  2. Naviga al file JavaScript che vuoi fare il debug.
  3. Fai clic sul numero di riga dove vuoi impostare un breakpoint.

Quando l'esecuzione si mette in pausa, usa i controlli di avanzamento: Step over (esegui la riga corrente), Step into (entra in una funzione chiamata) e Step out (termina la funzione corrente). Il riquadro Scope mostra le variabili locali e Call Stack mostra come sei arrivato a questa riga.

L'istruzione debugger

Puoi anche mettere in pausa direttamente dal codice. Quando i DevTools sono aperti, l'istruzione debugger; funziona come un breakpoint che risiede nel tuo sorgente — utile per codice generato a runtime o che non riesci facilmente a cliccare nel pannello Sources:

function updateTitle(text) {
  debugger; // execution pauses here when DevTools is open
  document.title = text;
}

Se i DevTools sono chiusi, debugger non fa nulla, quindi è sicuro lasciarlo durante lo sviluppo (ma rimuovilo prima di rilasciare il codice in produzione).

Breakpoint condizionali e logpoint

Per un handler che viene eseguito molte volte, fai clic destro su un numero di riga e scegli Add conditional breakpoint per mettere in pausa solo quando un'espressione è vera (per esempio count > 100). Un logpoint stampa un messaggio senza mettere mai in pausa — come un console.log() che puoi aggiungere senza modificare il sorgente.

Esempio di Debug della Manipolazione del DOM

<!DOCTYPE html>
<html>
<head>
    <title>Debugging Example</title>
</head>
<body>
    <div id="content">Hello, World!</div>
    <button id="change-text">Change Text</button>
    <p id="log"></p>

    <script>
        document.getElementById('change-text').addEventListener('click', function() {
            const content = document.getElementById('content');
            const log = document.getElementById('log');
            log.textContent = 'Current text: ' + content.textContent;
            content.textContent = 'Hello, Developer!';
            log.textContent += ' | Updated text: ' + content.textContent;
        });
    </script>
</body>
</html>
Provalo tu stesso »

Questo esempio dimostra come fare il debug della manipolazione del DOM visualizzando le modifiche nel DOM.

Problemi Comuni e Soluzioni

Risoluzione dei Problemi Comuni di Manipolazione del DOM

  1. Elemento Non Trovato

    L'errore DOM più comune è TypeError: Cannot read properties of null. Significa che un selettore ha restituito null perché l'elemento non esiste (un errore di battitura nell'id o il selettore sbagliato). Verifica sempre il risultato prima di usarlo. Vedi Ricerca: getElement, querySelector per la differenza tra i metodi dei selettori.

const element = document.getElementById('nonexistent');
if (element) {
    element.textContent = 'Found!';
} else {
    document.body.insertAdjacentHTML('beforeend', '<p>Element not found</p>');
}

  1. Tempistica Errata

    Se un <script> nel <head> viene eseguito prima che il body sia analizzato, gli elementi che cerca non esistono ancora — producendo lo stesso errore null di cui sopra. Esegui il codice DOM dopo che il documento è stato analizzato ascoltando l'evento DOMContentLoaded (oppure posiziona lo script alla fine del <body>).

document.addEventListener('DOMContentLoaded', function() {
    const element = document.getElementById('content');
    element.textContent = 'DOM fully loaded';
});

  1. CSS Non Applicato

    Se una modifica di stile non produce alcun effetto visibile, verifica nel pannello Elements che la classe sia stata effettivamente aggiunta (element.classList) e che nessuna regola più specifica la sovrascriva — i DevTools mostrano le regole sovrascritte con un testo barrato. Correlato: Gestione degli eventi nel DOM.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Not Applied</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="content">This is visible</div>
    <button id="hide-content">Hide Content</button>

    <script>
        document.getElementById('hide-content').addEventListener('click', function() {
            const content = document.getElementById('content');
            content.classList.add('hidden');
        });
    </script>
</body>
</html>
Provalo tu stesso »

Questo esempio dimostra come nascondere un elemento di contenuto aggiungendo la classe .hidden.

Informazione

Usa il pannello "Sources" nei DevTools del browser per impostare breakpoint e procedere passo dopo passo nel tuo codice JavaScript riga per riga. Questo ti permette di ispezionare variabili, il call stack e lo stato del DOM a ogni passo, rendendo molto più semplice identificare e correggere i bug.

Conclusione

I DevTools del browser sono indispensabili per ispezionare il DOM, fare il debug di JavaScript e risolvere problemi comuni. Padroneggiando questi strumenti e queste tecniche, puoi migliorare significativamente il tuo flusso di lavoro di sviluppo e creare applicazioni web più affidabili.

Pratica

Pratica
Quali delle seguenti affermazioni sul debug e sugli strumenti per la manipolazione del DOM sono vere?
Quali delle seguenti affermazioni sul debug e sugli strumenti per la manipolazione del DOM sono vere?
Was this page helpful?