javascript - 追踪在页面加载时应用内联样式的 JavaScript

Question

我正在管理一个 DNN 网站，并试图找到应用于主页上某些元素的“width: 100%”内联样式的来源。 DNN 中包含一大堆难以手动解析的 JS 库，但我打开了 Chrome 开发者工具，并在“源”选项卡中搜索了页面上加载的每个 JS 文件，以查看“100%”在哪里正在使用。没有骰子。

我知道“中断...”>“属性修改”功能。这总是被引用为我在 SO 上发现的类似问题的解决方案:

How to track down javascript that is modifying the inline style of a div in the DOM?

Finding Javascript-Applied Inline Styles to Debug Javascript

How can I find out what script is setting my element's visibility to hidden?

Which JS added inline styles?

问题是，与在“源”选项卡中调试 JavaScript 不同，当您刷新网页时，“元素”选项卡中的 HTML 元素上的调试点会被删除，并且我尝试跟踪的脚本仅在页面加载时运行一次并且在运行时不会再出现，因此断点永远不会被命中。

是否有其他方法可以识别 DOM 中特定元素的属性在页面加载期间何时何地发生变化？或者也许跟踪特定属性？

Answer 1

1. 将带有 debugger 语句的脚本标记放置在属性发生更改的元素之后:

   <div></div>
   <script>debugger</script>
   

2. 在检查器打开的情况下重新加载页面
3. 切换到元素选项卡并向元素添加属性删除断点
4. 恢复脚本执行

DevTools 现在将突出显示更改属性的代码。