🔍 Easy debugging in JavaScript with Chrome DevTools debug(functionName)

If you're a junior developer just starting to explore the world of JavaScript debugging, you're probably still using console.log() to understand what's happening in your code. But there's a faster and more powerful way to dive into a function and observe everything that happens step by step: it's called debug(functionName).

🔗 Do you like Techelopment? Check out the site for all the details!

🚀 What is `debug(functionName)`?

It's a special function available in the Chrome DevTools console that lets you say:

"Chrome, whenever this function is called, stop right there and show me everything."

Basically, it inserts an automatic breakpoint at the beginning of a specific function, without changing the code.

🛠️ How do I use it?

Open Chrome DevTools with F12 or right-click → "Inspect"
Go to the Console
Type:
```
debug(FunctionName);
```
Run or reload the code that calls that function

Chrome will automatically stop at the beginning of the function and open the Sources tab to allow you to debug.

📦 Practical Example

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

greeting("Francesco");

Write to console:

debug(greeting);

Now, every time greeting() is called, Chrome stops at the beginning of the function.

📊 Related Commands

Command	Effect
`debug(fn)`	Insert a breakpoint at the beginning of the function
`undebug(fn)`	Remove the breakpoint
`monitor(fn)`	Log each call to the function with parameters
`unmonitor(fn)`	Stop monitoring

⚠️ Limitations to be aware of

🔒 Console-limited scope: The function to be debugged must be accessible from the global scope or the console. If it's inside a private closure or a module, it may not be visible.
🕵️‍♂️ Doesn't work with anonymous functions: If the function is anonymous (e.g., used as an inline callback) and doesn't have a reference assigned, you can't pass it to debug().
🔄 ⚠️ Doesn't survive on page refresh:
When you reload the page, all JavaScript context (including breakpoints created viadebug()) is reset.
You will need to rerun debug() after each refresh, once the function is available again.

👉 Recommended solution: Use a DevTools snippet to automatically re-enable it:

Go to DevTools → Sources → Snippets
Create a new snippet, e.g. debug-greeting
Write this code towait for function availability (e.g. from an asynchronous script, a framework, etc.) before activating debugging:

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");

🎯 Conclusion

debug(functionName) is a powerful and underrated tool for better understanding your JavaScript code without changing anything. If you're still only using console.log(), you're missing out on a feature that can save you time and improve your skills.

And if you reload the page... remember to reactivate it 😉

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