Lately I’ve been using a lot of chrome breakpoints when debugging a very large web app. And I felt really frustrated with a bug that doesn’t allow you to remove the DOM breakpoints in google chrome. I’ve searched a while and only found vague information about how to remove them. The suggestions around the internet point to:
- Updating your browser
- Re-instaling chrome
- Hard reseting chrome
- etc…
All this very annoying to do in my opinion, as the amount of steps and time lost is to much. Making many developers simply stop using this awesome feature which is the ability to put breakpoints directly into DOM changes in chrome.
I felt sad that such an old bug keeps persisting in Chromium, but meanwhile I’ve found here a description on how to remove it. And would like to share it with anyone who may stumble upon my blog.
There are 3 simple and fast steps to remove them:
- Open the inspector (Ctrl+Shift+i, on windows) and undock it. (To undock it click on the bottom left icon in the inspector)
- Open the inspector’s inspector (Ctrl+Shift+i while having the inspector window with focus).
- In the second inspector (the last one to open) type into the console:
WebInspector.settings.domBreakpoints.set([]);
And that’s it. You have now cleared all DOM breakpoints in google chrome, without having to even restart it 
It seems this bug is already fixed for release, but my guess is that it will still take some months until it hits the stable version in google chrome. So I hope this can help someone, and now that you have the second inspector open, take the chance to use it to inspect the other inspector, it is quite nice the structure of it
Merry Coding
p.s. If this was helpful and you want more please Like it and follow me on twitter