95

enter image description here

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?

1
  • What version of chrome are you using?
    – Tennyson H
    Feb 8, 2016 at 19:59

10 Answers 10

19

If you are using js minification and sourcemaps, ensure that they are up to date with your source code.

6
  • 2
    My sourcemaps should be up to date, but that's a pretty good clue. Here's someone with a similar problem who's using Closure: stackoverflow.com/questions/20013786/…. I'm also using Closure. I'll take another look tomorrow.
    – Leo Jiang
    Feb 9, 2016 at 8:58
  • @Linksku , there also another threat: some of the folks are prepenfing info to the concatenated file. For example global configuration or something like that. And because of that sourcemaps can become useless too. Feb 9, 2016 at 9:08
  • 3
    @DanilaShutov How do you make sure that sourcemaps etc are up to date? This Chrome debugger error has been happening for a while for me, and it's very frustrating
    – reectrix
    Apr 7, 2016 at 12:35
  • 1
    @am5255, just try to build your app without minification and check if debugger works as expected. If it will, then certainly there is something wrong with build scripts. Also check this link: fitzgeraldnick.com/weblog/51 I encountered this issue only once: when I attempted to prepend script with configuration to minified bundle and forgot to include that script in sourcemaps complitaion. Because of that sourcemaps become invalid and debuggers been acting like topic starter described. Apr 8, 2016 at 8:30
  • 1
    got the exact same issue I have to add an unused variable before, then I can set the break point my code is definetely in sync with my build so it is clearly a bug
    – Phil
    Nov 10, 2017 at 10:32
17

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

0
4

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.

2

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.

1

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.

1
  • was having the same issue with Typescript. Set a break point in the transpiled file magically jumps to the ts file where i could not set break point by click... really odd but worked somehow. Thanks! Oct 2, 2018 at 19:56
0

In my case, I could not put a break point on the calling function line, but it worked into the function... weird but at least it works.

0

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.

0

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"

2
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jun 22, 2022 at 18:22
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – Nol4635
    Jun 27, 2022 at 17:36
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.