子树修改断点

Question

有没有办法在页面加载后在新的HTML元素添加上设置断点？

我有一个插件，它向页面呈现一个弹出窗口（在点击事件上），并且有一个特定的标签属性，只有在我点击按钮渲染弹出窗口后才会改变 - 我需要设置一个断点属性更改时标记

我尝试使用“break on-＆gt;子树修改”，但是插件生成了很多代码，我想知道是否有任何方法可以打破该特定标记

我在渲染弹出窗口后尝试设置“break on-＆gt;属性修改” - 但是当我关闭弹出窗口并再次单击打开弹出窗口时，断点就消失了，并且没有保存。

Answer 1

你能在一些附在按钮上的js上放一个断点（如果有的话）吗？然后是下一个，下一个，下一个......直到你进入属性改变？您应该能够交换到元素视图并在中断后观察它。

Answer 2

“break on-＆gt;子树修改”应该有效。看起来你遇到了一些问题。如果您可以花一些时间来answer帮助您

Answer 3

在这样的情况下，

Subtree Modification Breakpoints是我的首选解决方案。你提到很多HTML都会被改变。在更具体的节点上设置断点可能会有所帮助。例如：

<body>
  <div>
    <p>...</p>
  </div>
</body>

假设您要检查的元素是<p>的子元素。不是在<body>或<div>上设置断点，而是在<p>上设置断点。它只会在<p>的孩子改变时发生变化。

事件侦听器断点

如果要打破导致更改的按钮的事件侦听器代码，可以设置Event Listener Breakpoint。我在What's New In DevTools (Chrome 63)中给出了一个例子。