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

Posted 2023-03-07

【中文标题】在 Chrome 中单步执行 JavaScript 断点时如何查看 DOM？

【英文标题】：How can I view the DOM while I am stepping through JavaScript breakpoints in Chrome?

【发布时间】：2017-08-12 05:50:46

【问题描述】：

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

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

必须在 Sources 选项卡之间来回切换以执行单行，然后在 Elements 选项卡之间来回切换以查看我执行的每一行的 DOM 是如何修改的，这妨碍了我的调试，并且让我无法知道如何每一行都在影响 DOM。

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

【问题讨论】：

我还没有找到一个简单的方法来做到这一点。我只是在标签之间切换。

在控制台中粘贴要查看的节点的引用，即可查看简化树。

或者只是在监视面板中放置对 DOM 元素的引用。

Tab Elements，选择要监控的元素，RMB，Break on...属性修改。启用，进入 JS 并在完成后取消选中。

相关：Is it possible to open multiple instances or split view of chrome developer tools tabs?

【参考方案1】：

我想我可能会在你的 js 中输入 debugger，进入开发工具中的 Elements 视图，你可以右键单击要调试的元素，然后选择子菜单 break on，有几个选项你来调试你的 DOM。

另外，您可以通过 $("selector") 在控制台中检查要调试的元素

【参考方案2】：

不确定我是否正确，但您可以从 Sources 选项卡中参考 DOM 检查，而无需切换选项卡。

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

【参考方案3】：

MutationObserver

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

在 DevTools 控制台中执行以下代码（或另存为 sn-p）：

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

【讨论】：

哇，太酷了。我将不得不很快使用它。它似乎是一个强大的工具。