Google Chrome控制台设置了HTML元素添加的断点

Question

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

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

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

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

Answer 1

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

Answer 2

“破解 - >子树修改”应该有效。看起来你遇到了一些问题。如果你可以花一些时间，这个answer可能会帮助你

Answer 3

Subtree Modification Breakpoints

在这种情况下，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)举了一个例子。