如何冻结dom树的状态(不使用js" debugger"语句)来检查它?

时间:2015-10-05 14:39:18

标签: html browser web google-chrome-devtools firefox-developer-tools

也许我对浏览器的开发工具提出了太多要求但是...有一些方法可以简单地冻结网页的状态,而无需在JS代码中找到相对的行并放置$JAVA_HOME/bin/java $JVM_ARGS $JMETER_OPTS -jar "$PRGDIR/ApacheJMeter.jar" "$@" 声明? (不是特定于浏览器的问题,任何可以做到这一点的浏览器都是好的)

我有一种情况,我想检查页面上只能访问的一些DOM:

  • 我点击了一个特定的按钮
  • 它在模糊事件后消失(例如,一旦我在检查器中找到父元素并单击它,它会立即消失)。

因为它在点击时触发,"强制元素状态"也没帮助。

谢谢!

2 个答案:

答案 0 :(得分:2)

在Chrome中,如果您知道将要修改的界面中的包含元素,请右键单击它并" Inspect Element" (或者直接在DOM中直接使用它,如果这对你来说更容易),然后右键单击DOM中的元素并选择" Break On ..." > "子树修改" (或者适合你的其他选择)。

当DOM中的任何元素发生变化时,这应该暂停JavaScript执行,允许您使用F10等逐步执行JS,并在执行期间的任何时候查看DOM。

如果您不知道会发生什么变化,您当然可以通过这种方式监控整个<body>,但这可能会捕获太多变化,具体取决于您的网页的动态程度。

答案 1 :(得分:1)

在开发工具中,您可以在源代码的任何行设置断点。 它就像在Visual Studio中一样工作。

即使您停止并重新启动浏览器,断点也将保持活动状态。 它至少适用于Chrome / Firefox / Internet Explorer。

或者,您可以在序列化之后记录对象状态:

console.log( JSON.stringify( state ) )