javascript - Adding a breakpoint in the middle of a line with Chrome Web Inspector - Stack Overflow

admin管理员组

文章数量:1182257

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.

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.

• javascript
• debugging
• google-chrome
• breakpoints
• web-inspector

Share Improve this question Follow asked Aug 6, 2011 at 7:23 icktoofayicktoofay 129k2323 gold badges257257 silver badges236236 bronze badges 3

• If anyone's wondering why, I'm trying to debug a minified script hosted on a server not controlled by me. – icktoofay Commented Aug 6, 2011 at 7:23
• 2 Since Google Chrome 55 you can get multiple breakpoints per line. Please have a look here: - umaar.com/dev-tips/129-inline-breakpoints - youtube.com/watch?v=HF1luRD4Qmk&feature=youtu.be&t=573 – anddoutoi Commented Apr 4, 2017 at 8:28
• Use cautiously with large minified scripts as annotating the line with all of the breakpoint choices can take many minutes, effectively killing the thread. – ericP Commented Jan 18, 2020 at 6:34

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 21

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

本文标签： javascriptAdding a breakpoint in the middle of a line with Chrome Web InspectorStack Overflow