Debugging JavaScript interattivo con Live Expressions e monitoraggio del DOM

Introduzione

Quando un’applicazione JavaScript non si comporta come previsto, spesso non basta stampare un valore nella console. È utile osservare come cambiano i dati nel tempo, verificare le condizioni del browser e controllare se gli elementi della pagina vengono aggiornati correttamente. Gli strumenti per sviluppatori dei browser offrono alcune funzionalità interattive particolarmente efficaci: le Live Expressions, il monitoraggio degli eventi e l’ispezione dinamica del DOM.

Le Live Expressions permettono di eseguire continuamente un’espressione JavaScript nella scheda Console. Il risultato viene aggiornato automaticamente ogni volta che cambia lo stato osservato. In questo modo è possibile controllare, per esempio, il numero di elementi presenti nella pagina, il valore di una variabile globale o lo stato di un componente senza inserire decine di istruzioni console.log() nel codice.

In questo tutorial realizzeremo una piccola lista di attività. L’utente potrà aggiungere, completare ed eliminare elementi. Utilizzeremo la console del browser per osservare in tempo reale il numero di attività, il contenuto del DOM e alcuni valori interni dell’applicazione.

Codice completo

<button id="add-task">Aggiungi attività</button>
<button id="remove-completed">Rimuovi completate</button>

<p id="status"></p>
<ul id="task-list"></ul>

<script>
  const tasks = [
    { id: 1, title: "Studiare gli strumenti del browser", completed: false },
    { id: 2, title: "Provare una Live Expression", completed: true }
  ];

  const taskList = document.querySelector("#task-list");
  const status = document.querySelector("#status");
  const addButton = document.querySelector("#add-task");
  const removeCompletedButton = document.querySelector("#remove-completed");

  function renderTasks() {
    taskList.innerHTML = "";

    tasks.forEach((task) => {
      const item = document.createElement("li");

      item.textContent = `${task.title} - ${
        task.completed ? "completata" : "da completare"
      }`;

      // Un clic sull´elemento modifica il suo stato.
      item.addEventListener("click", () => {
        task.completed = !task.completed;
        renderTasks();
      });

      taskList.appendChild(item);
    });

    updateStatus();
  }

  function updateStatus() {
    const completedCount = tasks.filter((task) => task.completed).length;

    status.textContent =
      `Totale: ${tasks.length} | Completate: ${completedCount}`;
  }

  addButton.addEventListener("click", () => {
    const nextId = tasks.length + 1;

    tasks.push({
      id: nextId,
      title: `Nuova attività ${nextId}`,
      completed: false
    });

    renderTasks();
  });

  removeCompletedButton.addEventListener("click", () => {
    // Mantiene soltanto le attività non completate.
    const remainingTasks = tasks.filter((task) => !task.completed);

    tasks.length = 0;
    tasks.push(...remainingTasks);

    renderTasks();
  });

  renderTasks();
</script>

Spiegazione

Creare una Live Expression

Per iniziare, apri gli strumenti per sviluppatori del browser con F12 oppure con la combinazione Ctrl + Shift + I su Windows e Linux. Su macOS puoi utilizzare Cmd + Option + I. Seleziona quindi la scheda Console.

Nel codice precedente, l’array tasks contiene lo stato principale dell’applicazione. Nella console puoi scrivere:

tasks.length

Per trasformare questa espressione in un controllo continuo, fai clic sull’icona delle Live Expressions, generalmente rappresentata da un simbolo a forma di occhio o da un pulsante chiamato Create live expression. Inserisci quindi:

tasks.length

Il browser mostrerà il risultato dell’espressione in un riquadro persistente. Premi il pulsante “Aggiungi attività” e osserva come il valore passa da 2 a 3. Se elimini le attività completate, il valore verrà aggiornato nuovamente.

Osservare solo le attività completate

Una Live Expression può contenere qualsiasi espressione valida nel contesto corrente. Per visualizzare il numero di attività completate, usa:

tasks.filter(task => task.completed).length

Puoi anche controllare direttamente lo stato visibile nella pagina:

document.querySelector("#status").textContent

Questa tecnica è utile quando sospetti una differenza tra i dati JavaScript e l’interfaccia. Se l’array contiene tre attività ma il testo mostra un totale diverso, probabilmente il problema si trova nella funzione di rendering o nell’aggiornamento dello stato.

Controllare il DOM con la console

Il DOM rappresenta la struttura corrente della pagina. Per sapere quanti elementi li sono presenti, puoi usare:

document.querySelectorAll("#task-list li").length

Confronta questo valore con tasks.length. I due numeri dovrebbero normalmente coincidere. Se sono diversi, l’applicazione sta mantenendo una distanza tra lo stato interno e ciò che viene mostrato all’utente.

Per ispezionare un elemento specifico puoi usare $0. Dopo aver selezionato un elemento nella scheda Elements, torna nella Console e scrivi:

$0

La variabile speciale $0 rappresenta l’ultimo elemento selezionato nel pannello degli elementi. Sono disponibili anche $1, $2 e così via per gli elementi selezionati in precedenza.

Monitorare gli eventi

Un altro problema frequente è l’evento che non viene eseguito oppure viene eseguito più volte. Nei browser basati su Chromium puoi monitorare gli eventi di un elemento con monitorEvents(). Seleziona il pulsante nella scheda Elements, poi esegui:

monitorEvents($0, "click")

Ogni clic sull’elemento verrà mostrato nella console con informazioni sull’evento. Per interrompere il monitoraggio usa:

unmonitorEvents($0, "click")

Queste funzioni sono strumenti della console e non devono essere inserite nel codice dell’applicazione.

Best practice

• Osserva una sola domanda alla volta. Invece di creare molte espressioni confuse, definisci controlli mirati come il numero di elementi, il contenuto di un campo o il risultato di un filtro.
• Confronta stato e interfaccia. Metti a confronto tasks.length con document.querySelectorAll("#task-list li").length per individuare rapidamente problemi di sincronizzazione.
• Controlla le condizioni booleane. Espressioni come tasks.filter(task => task.completed) aiutano a verificare se i dati possiedono davvero lo stato atteso.
• Rimuovi il monitoraggio temporaneo. Le Live Expressions e monitorEvents() sono ottime durante il debug, ma non fanno parte della logica definitiva dell’applicazione.
• Usa nomi comprensibili. Variabili come tasks, completedCount e taskList rendono le espressioni più leggibili e riducono gli errori di interpretazione.
• Riproduci sempre il problema. Prima di modificare il codice, esegui una sequenza precisa di azioni e osserva quali valori cambiano. Questo facilita la ricerca della causa reale.
• Presta attenzione al contesto. La console esegue le espressioni nel contesto della pagina o del frame attualmente selezionato. Se utilizzi iframe, verifica di aver scelto il contesto corretto.

Riepilogo

Le Live Expressions trasformano la console in un pannello di osservazione dinamico. Invece di stampare manualmente ogni cambiamento, puoi seguire in tempo reale valori come il numero di elementi in un array, il conteggio delle attività completate o il testo visualizzato nella pagina.

L’ispezione del DOM con querySelectorAll() e la variabile speciale $0 permettono di confrontare lo stato JavaScript con la struttura effettiva dell’interfaccia. Infine, monitorEvents() aiuta a capire se gli eventi vengono generati correttamente.

Combinando queste tecniche puoi diagnosticare in modo rapido problemi di sincronizzazione, rendering incompleto, eventi duplicati e condizioni di stato errate, senza appesantire il codice con log temporanei.

Approfondisci con risorse ufficiali

• Chrome DevTools: Live Expressions
• Chrome DevTools: funzioni di utilità della Console
• MDN: strumenti per sviluppatori del browser
• MDN: document.querySelectorAll()