如何冻结dom树的状态（不使用js“调试器”语句）来检查它？
Posted
技术标签:
【中文标题】如何冻结dom树的状态（不使用js“调试器”语句）来检查它？【英文标题】：How to freeze state of the dom tree (without using js "debugger" statement) to inspect it? 【发布时间】：2016-01-02 06:27:33 【问题描述】：也许我对浏览器的开发工具的要求太多了，但是......有没有办法简单地冻结网页的状态而不在 JS 代码中找到相关行并放置 debugger 语句？ （不是特定于浏览器的问题，任何可以做到这一点的浏览器都很好）
我有一种情况，我想检查页面上的某些 DOM，这些 DOM 只能在以下情况下访问：
我点击了一个特定的按钮 它在模糊事件后消失（例如，一旦我在检查器中找到父元素并单击它，它就会立即消失）。因为它在点击时触发，所以“强制元素状态”也无济于事。
谢谢！
【问题讨论】：
Can I break with debugger on all changes to a DOM element?的可能重复 【参考方案1】：在 Chrome 中，如果您知道要修改的界面中的包含元素，然后右键单击它并“检查元素”（如果这对您来说更容易，或者直接在 DOM 中查看它），然后右键单击DOM 中的元素，然后选择“Break On...”>“子树修改”（或任何其他适合您的选项）。
这应该会在 DOM 中的任何元素发生更改时暂停 javascript 执行，从而允许您使用 F10 等单步执行 JS 并在其执行期间的任何时间查看 DOM。
如果您不知道会发生什么变化，当然可以通过这种方式监控整个 <body>，但这可能会捕获太多变化，具体取决于您的页面的动态程度。
【讨论】：
【参考方案2】：在开发工具中，您可以在源代码的任意行设置断点。 例如，它就像在 Visual Studio 中一样工作。
即使您停止并重新启动浏览器，断点仍将保持活动状态。 它至少适用于 Chrome / Firefox / Internet Explorer。
或者，您可以在序列化后记录对象状态：
console.log( JSON.stringify( state ) )
【讨论】：
以上是关于如何冻结dom树的状态（不使用js“调试器”语句）来检查它？的主要内容，如果未能解决你的问题，请参考以下文章