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?

Indolence

What version of chrome are you using? – Equuleus

Answer 1

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

Lyophilic

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: #20014286. I'm also using Closure. I'll take another look tomorrow. – Indolence

@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. – Lyophilic

@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 – Oogonium

@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. – Lyophilic

Unfortunately as of 06.2017 the link I've posted no longer works. Author changed how his blog works so article is actualy there but the link is broken. – Lyophilic

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 – Tolson

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

Clement

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.

Uppish

Answer 4

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.

Archil

That was the case with me too. Definitely a Chrome bug because I didn't have the issue with the Edge. – Guizot

Answer 5

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.

Congratulate

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! – Tabby

Answer 6

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.

Many

Answer 7

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.

Dwarfism

Answer 8

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.

Communicate

Answer 9

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"

Touchy

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

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 – Stevana

Answer 10

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.

Racine

Answer 11

In my case the problem was, that the build was minified. Solution was to build project (angular) not minified by setting optimization=false in build command.

Engelbert

Answer 12

In my case, the file was out of date. Because of some kind of caching system, the filenames had a unique integer appended to them, for example file.js?cacheId=1234.

Try Ctrl-Shift-F searching for your code again. It may be in a new file with a new unique integer. The new search results should be breakpoint-able.

Unbelievable