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

Question

Say I have some JavaScript code like this:

function breakpointInside() { console.log("How do I add a breakpoint here?"); }
breakpointInside();

Assume I can't edit the source file. I would like to debug breakpointInside , but I cannot figure out how to add a breakpoint in the middle of the line. In this example, it's trivial to step into the function, but assume it's a more complex script where this isn't as practical.

Answer 1

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 {}

Answer 2

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

Answer 3

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.