是否可以检查DOM修改，因为它们发生？ [英] Is it possible to inspect DOM modifications as they happen?

问题描述

我想看看通过一个jQuery插件，工具提示（qTip V1）生成的HTML。工具提示只有当我将鼠标悬停在与我的鼠标指针元素出现。一般情况下我刚刚检查HTML或Chrome的开发者控制台深入挖​​掘，但只要我这样做，工具提示消失，因为鼠标悬停事件结束。工具提示的位置超出了文件的正常流动，所以我不能设置元素片（铬）轻松地把它当作它的发生。是否有与检查目的的热键冻结DOM任何浏览器的方法？我打开其他的想法 - 任何让我检查，我的鼠标不一定是附近时将消失我的鼠标移动的元素。我并不想开始把调试器在插件的JavaScript搞乱。

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断点

DOM断点Chrome可能做的伎俩：的https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#dom

DOM breakpoints in Chrome may do the trick: https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#dom

您只需要进入到工具提示将被追加父元素。然后，您可以停止所有的Javascript将prevent从DOM任何JavaScript消除任何

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.

从笔者的问题附录：

您还可以在属性修改突破，当某个属性的子树元素修饰这个暂停JavaScript执行。此选项是相同的菜单相同的菜单子树修改下。

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.

这篇关于是否可以检查DOM修改，因为它们发生？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！