This question already has an answer here:
- Find what javascript changes the DOM? 2 answers
I'm trying to look at the html produced by a jQuery tooltip plugin (qTip v1). The tooltip only appears when I hover over the element with my mouse pointer. Normally I'd just inspect the html or dig deeper with Chrome's developer console, but as soon as I do that the tooltip disappears because the mouseover event ends. The tooltip's position is outside the normal flow of the document so I can't set up the Elements tab (Chrome) easily to view it as it's happening. Is there a method in any browser that freezes the DOM with a hotkey for inspection purposes? I'm open to other ideas as well--anything that lets me inspect an element that my mouse is not necessarily near that will disappear when my mouse moves. I don't want to start messing with putting debugger's in the plugin's javascript.
DOM Breakpoints
DOM breakpoints in Chrome may do the trick: https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#dom
You just need access to a parent element where the tooltip will be appended. You can then stop all Javascript which will prevent any Javascript removing anything from the DOM.
Addendum from question author:
You can also "break on attribute modification", this pauses the Javascript execution when an attribute is modified on subtree elements. This option is under the same menu same menu as subtree modification.
来源：https://stackoverflow.com/questions/14219636/is-it-possible-to-inspect-dom-modifications-as-they-happen