Question

在Chrome DevTools中，在Sources选项卡中调试JavaScript（在JS代码中添加“debugger;”行，然后使用F10 / F11逐步执行代码），如何在单步执行代码时查看DOM？ / p>

如果我的JS正在操作DOM，我需要逐步浏览JS调试器并观察我的JS如何修改DOM元素是很常见的。例如，我可能必须看看元素是如何移动的，它们是否应该被删除，它们是否在正确的时间获得正确的类等等。

必须在Sources选项卡之间来回切换以执行单行，然后在Elements选项卡中查看如何为我执行的每一行修改DOM，这会影响我的调试并使我无法告诉如何每一行都影响着DOM。

如何在同时单步执行代码时查看元素？

Answer 1

<强> MutationObserver

我不认为DevTools（从Chrome 59开始）能够满足您的需求（目前），但MutationObserver可能有所帮助。

在DevTools控制台中执行以下代码（或将其另存为代码段）：

var target = document.querySelector('body');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });    
});
var config = { 
  childList: true, 
  attributes: true, 
  characterData: true, 
  subtree: true, 
  attributeOldValue: true, 
  characterDataOldValue: true
};
observer.observe(target, config);

这和它一样冗长。它会将每个更改记录到body或其任何后代。您可以调整代码以跟踪更少的更改（例如，通过观察更具体的节点，或关闭配置标志）。

有关所有配置标志的说明，请参阅MutationObserverInit。还有一个attributeFilter标志（代码示例中未使用）可能对您有用。

DOM断点

另一种选择是在节点上设置“子树修改”DOM Breakpoint。每当添加或删除节点或其任何子节点或其内容发生更改时，DevTools都会暂停。但是，它不会跟踪属性修改，因此对于此方案可能还不够。

Answer 2

我想我可能会在你的js中输入调试器，转到dev工具中的Elements视图，你可以右键单击要调试的元素，然后选择子菜单中断，有几个选项可供选择你要调试你的DOM。

此外，您可以通过$（“selector”）

检查要在控制台中调试的元素

Answer 3

不确定我是否帮助您，但您可以从“来源”选项卡参考DOM检查，而无需切换标签。

在Sources选项卡中，您可以显示控制台（按ESC为我工作），然后通过$ 0 .. $ 4或选择器的任何其他DOM引用最新的DOM更改。请参阅Chrome's Command Line API Reference

当我逐步浏览Chrome中的JavaScript断点时，如何查看DOM？

3 个答案: