CODEWITHSUNDEEP
javascriptdebugginggoogle-chromebreakpointsweb-inspector
icktoofay
icktoofay

Reputation: 129119

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 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.

Upvotes: 23

Views: 8686

Answers (3)

Digital Plane
Digital Plane

Reputation: 38284

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

Upvotes: 21

UKM
UKM

Reputation: 305

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

Upvotes: 3

Pavel
Pavel

Reputation: 41

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.

Upvotes: 4

Related Questions