当我逐步浏览Chrome中的JavaScript断点时，如何查看DOM？ [英] How can I view the DOM while I am stepping through JavaScript breakpoints in Chrome?

问题描述

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

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

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

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

解决方案

MutationObserver

我不认为DevTools（从Chrome 59开始）可以处理你的需要（目前），但MutationObserver可能有帮助。

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

  var target = document.querySelector（'body'）; 
 var observer = new MutationObserver（function（mutation）{
 mutation.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断点。每当添加或删除节点或其任何子节点或其内容发生更改时，DevTools都会暂停。但是，它不会跟踪属性修改，因此对于这种情况可能还不够。

In Chrome DevTools, while debugging JavaScript in the Sources tab(adding the "debugger;" line in JS code and then stepping through the code using F10/F11), how can I view the DOM while stepping through the code?

If my JS is manipulating the DOM, it is very common that I need to step through the JS debugger and watch how the DOM elements are modified by my JS. For example, I might have to see how elements are being moved, whether they are being removed when they are supposed to, whether they are getting the correct class at the correct time, etc.

Having to switch back and forth between the Sources tab to execute a single line and then Elements tab to see how the DOM was modified for every line I execute gets in the way of my debugging and keeps me from being able to tell how each line is affecting the DOM.

How can I view the elements while stepping through code simultaneously?

解决方案

MutationObserver

I don't think DevTools (as of Chrome 59) is equipped to handle your need (at the moment), but a MutationObserver might help.

Execute the following code in the DevTools Console (or save it as a snippet):

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);

This is about as verbose as it gets. It logs every change to body or any of its descendants. You can tweak the code to track less changes (e.g. by observing a more specific node, or turning off the config flags).

See MutationObserverInit for a description of all of the config flags. There's also an attributeFilter flag (not used in the code sample) which may be of use to you.

DOM Breakpoint

Another option is to set a "subtree modification" DOM Breakpoint on a node. DevTools pauses whenever the node or any of its children is added or removed, or its contents are changed. However, it doesn't track attribute modifications, so that may not be enough for this scenario.

这篇关于当我逐步浏览Chrome中的JavaScript断点时，如何查看DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！