🔍 Debugging facile in JavaScript con debug(functionName) di Chrome DevTools

Se sei un junior developer che ha appena iniziato a esplorare il mondo del debugging JavaScript, probabilmente stai ancora usando console.log() per capire cosa succede nel tuo codice. Ma c’è un modo più potente e veloce per entrare dentro una funzione e osservare tutto quello che accade passo dopo passo: si chiama debug(functionName).

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

🚀 Cos'è `debug(functionName)`?

È una funzione speciale disponibile nella console di Chrome DevTools che ti permette di dire:

“Chrome, ogni volta che viene chiamata questa funzione, fermati lì e fammi vedere tutto”.

In pratica, inserisce un breakpoint automatico all'inizio di una funzione specifica, senza modificare il codice.

🛠️ Come si usa?

Apri Chrome DevTools con F12 o clic destro → "Ispeziona"
Vai nella scheda Console
Digita:
```
debug(nomeFunzione);
```
Esegui o ricarica il codice che chiama quella funzione

Chrome si fermerà automaticamente all’inizio della funzione e aprirà la scheda Sources per permetterti di fare debug.

📦 Esempio pratico

function greeting(name) {
  console.log("Hello " + nome);
}

greeting("Francesco");

Scrivi in console:

debug(greeting);

Ora, ogni volta che greeting() viene chiamata, Chrome si interrompe all'inizio della funzione.

📊 Comandi correlati

Comando	Effetto
`debug(fn)`	Inserisce un breakpoint all’inizio della funzione
`undebug(fn)`	Rimuove il breakpoint
`monitor(fn)`	Logga ogni chiamata alla funzione con i parametri
`unmonitor(fn)`	Ferma il monitoraggio

⚠️ Limiti da conoscere

🔒 Scope limitato alla console: la funzione da debuggare deve essere accessibile dallo scope globale o dalla console. Se è dentro una closure privata o in un modulo, potrebbe non essere visibile.
🕵️‍♂️ Non funziona con funzioni anonime: se la funzione è anonima (ad esempio usata come callback inline) e non ha un riferimento assegnato, non puoi passarla a debug().
🔄 ⚠️ Non sopravvive al refresh della pagina:
Quando ricarichi la pagina, tutto il contesto JavaScript (inclusi i breakpoint creati via debug()) viene resettato.
Dovrai ri-eseguire debug() dopo ogni refresh, una volta che la funzione è nuovamente disponibile.

👉 Soluzione consigliata: usa uno snippet DevTools per riattivarlo in automatico:

Vai in DevTools → Sources → Snippets
Crea un nuovo snippet, es. debug-greeting
Scrivi questo codice per attendere la disponibilità della funzione (es. da uno script asincrono, da un framework, ecc.) prima di attivare il debug:

const waitAndDebug = (fnName) => {
  const interval = setInterval(() => {
    if (typeof window[fnName] === "function") {
      debug(window[fnName]);
      console.log(`debug activated for ${fnName}()`);
      clearInterval(interval);
    }
  }, 100);
};

waitAndDebug("greeting");

🎯 Conclusione

debug(functionName) è uno strumento potente e sottovalutato per capire meglio il tuo codice JavaScript senza modificare nulla. Se usi ancora solo console.log(), ti stai perdendo una funzionalità che può farti risparmiare tempo e migliorare le tue skill.

E se ricarichi la pagina... ricordati di riattivarlo 😉

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog