调试某些 javascript 函数在初始页面加载时更改 HTML 元素，但无法找到它。答案

【问题标题】：Debugging HTML element change upon initial page load by some javascript function, but unable to find it.调试某些 javascript 函数在初始页面加载时更改 HTML 元素，但无法找到它。
【发布时间】：2017-08-23 19:47:36
【问题描述】：

我知道 chrome 有一个 javascript 调试器，如果有任何内容被修改，您可以在其中设置断点，但您只能在页面已经加载时执行此操作。我试图弄清楚在初始页面加载时如何为元素分配内联样式。我试图在文件中搜索课程，但没有任何显示。我不确定如何追踪设置的位置。视图源不显示任何内联样式，因此它必须来自 js 文件。

如何调试这个？

【问题讨论】：

标签： javascript google-chrome-devtools frontend breakpoints javascript-debugger

【解决方案1】：

我唯一能建议的是：

在Script > Script First Statement上设置event listener breakpoint。
重新加载页面。 DevTools 在执行的第一个脚本的第一行暂停。
现在，回到元素面板，在<body>上放置一个子树修改 DOM breakpoint。只要修改任何节点，DevTools 就会暂停。或者，如果您的目标节点在 HTML 中声明并且已经存在于页面上，则直接在目标节点上设置 DOM 断点。
一直按Resume Script Execution，直到找到修改节点的代码行。每次按恢复脚本执行，脚本只会执行，直到另一个节点被修改。

这绕过了 DOM 断点在页面加载时不起作用的 DevTools 限制，因为从技术上讲，在您设置 DOM 断点时页面已经开始运行。

不过，这似乎是一个非常核心的用例。正如您所提到的，单个节点上的 DOM 断点在页面加载时不起作用。 DOM 突变事件侦听器断点也没有。我会提出一个功能请求来以一种或另一种方式处理这个问题。

【讨论】：

太棒了。有用。你是怎么知道的？ chrome 开发工具中的选项太多了，有人可以上一门课程。
优秀的答案