Adding a breakpoint in the middle of a line with Chrome Web Inspector Adding a breakpoint in the middle of a line with Chrome Web Inspector google-chrome google-chrome

Adding a breakpoint in the middle of a line with Chrome Web Inspector


Here are 2 related solutions

1) De-obfuscate Source

You can't put a breakpoint inside a line, but you can (in newer versions of Chrome) right-click on the script, select De-obfuscate Source, and put a breakpoint on the de-obfuscated version (which will have one statement on each line).

2) Pretty Print

(based on comment by Nicolas)

In later versions of Chromium-based browsers, this function is called "Pretty print" and is available as a button at the left below the source code panel that looks like {}


You can edit the source with Chrome DevTools live: simply double click on the source in the Scripts panel and add a line break before console.log. Press Ctrl+Enter or Ctrl+S to commit your change into the virtual machine. Then set breakpoint on the new line containing console.log.


The comment by Nicolas Boisteault is the one to be used in latest versions of chrome.

In 2015 you can click the {} button called pretty print at the bottom left. – Nicolas Boisteault