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

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 sourc开发者_StackOverflow社区e 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.

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