Chrome DevTools won't let me set breakpoints on certain lines

Question

In the image above, I tried setting breakpoints on every line from line 437 to line 443. However, I cannot set breakpoints on lines 439 and 440. When the function runs, the breakpoints on lines 437, 438, 441, and 442 are ignored. Chrome breaks on line 443. This means that I cannot do some debugging before the first conditional runs.

When I click on lines 439 or 440, the breakpoint appears for half a second and jumps to line 443.

Is this a bug or am I missing something? How do I set a breakpoint at or before line 439?

Answer 1

如果您正在使用 js 缩小和源映射，请确保它们与您的源代码保持同步。

Answer 2

I have same problem in chrome dev tool source panel snippets when I write some codes to test my idea.

Only way for me worked is close dev tool panel and refresh page then reopen

This problem happened after I modified codes in debug mode

Answer 3

This was frustrating for me today but I found the problem. I was trying to place a breakpoint inside an orphan function (nothing was calling it). As soon as I fixed it, all was well. Smart - but wish there was even a tiny hint that this was the case.

Answer 4

This recently became an issue for me, running System.js and Babel, and with plain ES6 transpiling, I haven't gotten to minifying/mapping yet. A workaround seems to be to add your breakpoint to the !transpiled file, a matching breakpoint will automagically appear in the corresponding line in the raw file.

Answer 5

I think that my classmate and I had this issue as well today. We made our changes and then hit Ctrl + S (or Cmd + S) to save the changes in the debugger and then we were able to add the breakpoints.

Answer 6

就我而言，我无法在调用函数行上设置断点，但它在函数中起作用……很奇怪，但至少它起作用了。

Answer 7

I just had that problem and realized that what I saw in the dev tools source was not the code that actually ran in the browser.

Make sure you empty your cache and reload and have the up to date code.

Answer 8

My problems where in sourcemaps definitions. I solved my chrome debugging problems with this article: https://www.mistergoodcat.com/post/the-joy-that-is-source-maps-with-vuejs-and-typescript

I was allmost there, all i had to change was at vue.config.js: devtool: "inline-source-map" -> devtool: "eval-source-map"

Answer 9

In my case it was, most likely, a bug in the devtools. When I clicked to set a breakpoint inside an async function nothing seemed to happen, no visual indication of the breakpoint. Although outside the function it showed the blue mark correctly.

But when I ran the code it turned out that all the breakpoints had been set actually.

Answer 10

In my case, it turned out the function I was trying to add a breakpoint in, was never called but I'm not sure why it didn't allow me to add a breakpoint that would never hit anyway.