javascript - 在 Chrome 中单步执行 JavaScript 断点时如何查看 DOM？

Question

在 Chrome DevTools 中，在 Sources 选项卡中调试 JavaScript(在 JS 代码中添加“调试器”行，然后使用 F10/F11 单步执行代码)，如何在单步执行代码时查看 DOM？

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

必须在 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 都会暂停。但是，它不跟踪属性修改，因此对于这种情况可能还不够。