How to set breakpoints in inline Javascript in Google Chrome?

javascript

debugging

breakpoints

devtools

byNikita Barsukov·Feb 21, 2025

To pause execution within your inline JavaScript code, you need to open Chrome Developer Tools (Ctrl+Shift+I or Cmd+Option+I). Switch to the Sources panel and locate your HTML file in the navigator pane. Find the script line you need to debug, click the number beside it to immediately create a breakpoint. Yay! Your code will halt at this point of execution, so you can poke around at variable values or step through decisions your code makes.

<script>
  // Any guesses what debugger is going to do? Set a breakpoint and make a coffee!
  debugger;
  alert('Breakpoints: The coffee of JavaScript debugging!');
</script>

Betting on debugger; in your inline script? It only stops your execution when you've got Developer Tools wide open.

The Parser's Play: Inline Debugging

Naming scripts like your newborns

You might not want to name your code after your ex, but assigning names to inline scripts enhance their debuggability. This trick uses the //# sourceURL=somename.js convention:

//# sourceURL=friendlyscript.js
document.getElementById('element').onclick = function(){ debugger; /* Yeah, it's debugger time! */ };

friendlyscript.js magically appears in the DevTools Sources tab. Your inline script just made itself more approachable for navigation and setting breakpoints.

Wielding Developer Tools: A mute button for console.log

Launching a full-scale investigation using console.log is like finding Waldo with a microscope. Rather, unsheathe the mighty breakpoints and Chrome's debugging artillery to draw bead on ephemeral bugs. Set conditional breakpoints, be a helicopter parent to your variables and even interrogate expressions in the heat of execution.

Assume Nothing: Dodging Debugger Deception

Sometimes DevTools might try its hand at magic tricks -- go unresponsive or just deal you unexpected cards. What do you do? Stage an intervention. Reload your page. For more clingy situations, consider unhooking event listeners from elements to stave off unwanted reactions during paused execution.

Within DevTools, your snorkeling trip takes you to the Sources tab. Clicking the 'Show Navigator' icon, you can swim through the file directory similar to an IDE. Just double-tap a line number to send a breakpoint sailing to the Breakpoints panel.

Deciphering the Atlantean: Minified or Obfuscated Code

Got lost in a labyrinth of minified or obfuscated inline scripts? The {} button in the lower left of the Sources tab is your trusted guide. Click it to "pretty print" the script, transforming it from a dense jungle into a walk in the park.

Altitude is Attitude: Advanced Breakpoints

From conditional breakpoints that only halt execution with specific conditions to DOM breakpoints that pause your code when a DOM modification occurs; and even network-request breakpoints for XHR/Fetch, Chrome has a carpetbag full of tricks that bolt your debugging muscles.

explain-codes / Javascript / How to set breakpoints in inline Javascript in Google Chrome?

Linked

How do you launch the JavaScript debugger in Google Chrome?



Firebug-like debugger for Google Chrome



How do I debug Node.js applications?



How to disable JavaScript in Chrome Developer Tools?



How to defer inline Javascript?

