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