在 Chrome DevTools 中，在“源”选项卡中调试 JavaScript 时（在 JS 代码中添加“debugger;”行，然后使用 F10/F11 单步执行代码），如何在单步执行代码的同时查看 DOM？
如果我的 JS 正在操作 DOM，那么我通常需要单步调试 JS 调试器并观察 JS 如何修改 DOM 元素。例如，我可能必须查看元素是如何移动的，它们是否在应该删除的时候被删除，它们是否在正确的时间获得了正确的类，等等。
必须在“源”选项卡之间来回切换以执行单行，然后在“元素”选项卡之间来回切换以查看我执行的每一行的 DOM 是如何修改的，这会妨碍我的调试，并使我无法了解每行的情况影响 DOM。
如何在单步执行代码的同时查看元素？
变异观察者
我认为 DevTools（从 Chrome 59 开始）无法满足您的需求（目前），但 MutationObserver 可能会有所帮助。
在 DevTools Console 中执行以下代码（或将其另存为片段）：
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或其任何后代。您可以调整代码以跟踪较少的更改（例如，通过观察更具体的节点，或关闭配置标志）。
See 突变观察者初始化 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit有关所有配置标志的描述。还有一个attributeFilter标志（代码示例中未使用）可能对您有用。
DOM断点
另一个选项是设置“子树修改”DOM断点 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#dom在一个节点上。只要添加或删除节点或其任何子节点，或其内容发生更改，DevTools 就会暂停。但是，它不跟踪属性修改，因此这可能不足以满足此场景。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
