跟踪在页面加载时应用内联样式的JavaScript

Tracking Down JavaScript that Applies Inline Style on Page Load

本文关键字：样式 JavaScript 应用加载跟踪更新时间：2023-09-26

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

我知道Break on…>Attributes Modifications功能。这总是被引用为我在SO:上发现的类似问题的解决方案

如何跟踪正在修改DOM中div内联样式的javascript？

寻找Javascript应用的内联样式来调试Javascript

我怎样才能知道是什么脚本在设置我的元素'；隐藏的可见性？

哪些JS添加了内联样式？

问题是，与在"源"选项卡中调试JavaScript不同，在刷新网页时，"元素"选项卡中HTML元素上的调试点会被擦除，而我试图跟踪的脚本在页面加载时只运行一次，在运行时再也不会运行，因此断点永远不会被命中。

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

在属性发生更改的元素之后立即放置一个带有debugger语句的脚本标记：
```
<div></div>
<script>debugger</script>
```
在检查器打开的情况下重新加载页面
切换到元素选项卡，并向元素添加属性删除断点
恢复脚本执行

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

由于我的声誉很低，我需要为此创建一个答案，而不是一个注释。

如果

中断…>属性修改

对您不起作用，@metarmask的解决方案也无助于您在浏览器中查看插件。我遇到了同样的问题，只是停用了所有插件，突然间，使用断点一切都很好。