How do you preserve Chrome DOM breakpoints on page refresh?

18
votes

I want to see what code is modifying a DOM element on a webpage, so I set a breakpoint in Chrome by right-clicking on the element in the Elements tab of the DevTools inspector and choosing "Break on..." -> "Subtree Modifications". The script modifies the element when the page is loaded (and not after), so I want to preserve the DOM breakpoint and refresh the page.

The process for saving breakpoints in javascript code doesn't seem to apply to DOM breakpoints.

breakpoints

3
htmlgoogle-chromedebuggingdomgoogle-chrome-devtools
AFAIK this is not possible, but I think that your use case is solid, you should definitely open a ticket for that -> crbug.com – Konrad Dzwinel
Opened an issue: code.google.com/p/chromium/issues/detail?id=571519 – celeritas

3 Answers

12
votes

For now I added a debugger; line before any other code runs, added a DOM breakpoint, and continued.

9
votes

In Chrome, DOM breakpoints are not preserved upon refresh, they are thrown away, and then restored after the onload event. See bug report 571519, and this comment from that report:

We are preserving DOM breakpoints upon reload, but the breakpoints are only restored upon onload event. So if you expect breakpoint to trigger before that or it is set on a node that is added lazily, breakpoint is not restored. We should fix that though.

This is the workaround:

  1. pause the Javascript, either with a normal breakpoint or with debugger; line of Javascript
  2. remove all DOM breakpoints and add the DOM breakpoints that are needed
  3. resume.
4
votes

I believe this didn't have a proper explanation for the answer because I face the issue as well. the steps goes as follows.

  • open developer tools by pressing console f12,
  • you need to try to slow down your webpage rendering so you can be able to quickly pause javascript execution, the trick I use is to go to the network tab and set the online drop-down field to slow 3G so the pages become slower to render.
  • select the sources tab then on the left sidebar check breakpoints and make sure all break points are removed, if there are still some breakpoints set then remove them click on the pause execution button on your
  • go back to your webpage and reload it, with the network set as slow 3g, your page becomes slower to render then you can quickly go back to sources and pause the execution the moment you can see your HTML dom is loaded. in this way your webpage is in a paused state
  • go to your element tab, find the element you want to set breakpoint on and set it. then go back to sources tab and click continue execution this will make the execution stop at your element's break point