CODEWITHSUNDEEP
javascriptgoogle-chrome-devtools
Mark Erasmus
Mark Erasmus

Reputation: 2385

Chrome Developer Tools keeps breaking where no breakpoints are set

When debugging JavaScript code using Chrome Developer Tools the debugger pauses on code where breakpoints are not set. I don't have the Pause on exceptions feature enabled, and there definitely are not breakpoints set (see attached image).

I asked a similar question before which was helpful but didn't quite solve this issue (previously I had the Pause on exceptions enabled). In the example below I swapped out the minified version of kendo.all.min.js for the unminified version, which allows me to see where the script execution is being paused, but I don't know why it is being paused. This happens a lot with jquery.min.js too.

enter image description here

Upvotes: 57

Views: 19141

Answers (7)

David G
David G

Reputation: 631

I'm getting the same problem, even with no apparent breakpoints set. The only thing that seems to stop it is to toggle the Deactivate breakpoints option (Ctrl + F8).

The 'Deactivate breakpoints' toggle in Chrome's Developer Tools

This prevents Chrome stopping at the phantom breakpoint and sometimes has caused it to appear (as disabled) against the source code, allowing it to be removed.

UPDATE - 17/11/2023
Just found a more likely solution in the Developer Tools settings; under Experiments, there is an option for "Set all breakpoints eagerly at startup"

Chrome's Developer Tools' Experiments settings

Clearing this checkbox has made the 'hidden' breakpoint visible, so it can be removed.

Upvotes: 0

kenswdev
kenswdev

Reputation: 329

I'm posting this answer in case it will help someone who, like me, missed an important clue as to the cause of the phantom breakpoint behavior. In my case, it was "user error" --mine. The root cause was a forgotten "debugger;" statement in a JavaScript file that was itself generated from TypeScript. I had removed the debugger; statement from TypeScript locally, run and tested without issue from localhost. But I had pushed the version with the statement to remote and it built and released to our dev site with the statement present. The dev site build excludes the TypeScript source files. When the debugger statement was hit, Chrome tried to load the .ts source and displayed "Could not load content..." I just assumed it was at a breakpoint (I'd set many during testing). And when I saw "No breakpoint" I assumed Chrome was experiencing the issue addressed in this thread. If I'd bothered to look in the Call Stack trace, I would have seen the source code line in the .ts file and pretty quickly figured it out. Here's a screenshot:

enter image description here

Upvotes: 0

vike
vike

Reputation: 383

Accepted answer to Import/export Chrome devtools breakpoints & settings between computers reminded me to check "devtools-on-devtools" and in the DevTools' inner Application Local Storage remove the faulty element(s) of the JSON list value for key breakpoints to fix my same issue without resetting everything.

Later it happened again, so I wrote this console snippet:

((stores, matchKey, removeMatchingRegExp, dryRun)=>{for(let store of stores){
  let r = JSON.parse(localStorage[store]), l = r.length;
  r = r.filter(b=>!b[matchKey].match(removeMatchingRegExp));
  if(!dryRun) localStorage[store] = JSON.stringify(r);
  console.log(`${dryRun ? 'Would' : 'Did'} remove ${l - r.length} entries from ${store}:`, r)}; return 'OK'})
(['breakpoints', 'domBreakpoints'], 'url',
  new RegExp('^https?://example.com/script.js$'), true)

Note:

  • Provided without warranty: Use at own risk. Backup your data.
  • Edit it - at least the RegExp argument - to suite your needs.
  • The last-most boolean should be false to disable dryRun.
  • Outer DevTools must be reopened for effect.

Upvotes: 7

Ralph David Abernathy
Ralph David Abernathy

Reputation: 5508

I was able to resolve this by updating Chrome. I don't think the version matters, just the process of updating resets all of the breakpoints that have been stored in the cache.

Upvotes: 1

Crazy Cat
Crazy Cat

Reputation: 1452

I fixed my breakpoints problem by clicking the "Restore defaults and reload" button located in the “Settings” section. To find the button: In Developer Tools click the cogged wheel next to the top right three vertical dots. (Note: If using older versions of Google Chrome, click on the top right three vertical dots and then select “Settings F1”). The button “Restore defaults and reload” is at the bottom right.

Also note that it really restores defaults - you lose all previously saved breakpoints and any files you have open in Developer Tools will be closed.

I got this solution from: Chrome javascript debugger breakpoints don't do anything?

Upvotes: 67

Yas
Yas

Reputation: 270

just disable the cache and reload the page, the breakpoints will show up again

Upvotes: -1

lehp
lehp

Reputation: 1

F8 has two functionalitys. 1. Skip ot next Breakpoint, 2.stop wherever the Browser is executing code. This works even if you have no breakpoint set. For example spamming F8 when you forgot to deactivate breakpoints might cause the browser to stop anywhere.

When you go to the debugger shortcuts you can see that F8 has the functionality to Pause / Continue. But it sadly seems like you can't split them on two different keybinds.

Since I know this feature I never ran into this "bug" anymore.

Upvotes: 0

Related Questions