Tracking Down JavaScript 在页面加载时应用内联样式
Tracking Down JavaScript that Applies Inline Style on Page Load
我正在管理一个 DNN 站点，并试图找到 "width: 100%" 应用于我主页上某些元素的内联样式的来源。 DNN 中包含一大堆难以手动解析的 JS 库，但我打开 Chrome 开发人员工具并在“源”选项卡中搜索页面上加载的每个 JS 文件以查看“ 100%”正在使用。没有骰子。
我知道 Break on... > Attributes Modifications 功能。这总是被引用为我在 SO 上发现的类似问题的解决方案：
How to track down javascript that is modifying the inline style of a div in the DOM?
How can I find out what script is setting my element's visibility to hidden?
Which JS added inline styles?
问题在于，与在“源”选项卡中调试 JavaScript 不同，当您刷新网页时，“元素”选项卡中 HTML 元素上的调试点会被擦除，而我的脚本尝试跟踪只在页面加载时运行一次，在运行时不会再运行一次，因此永远不会命中断点。
是否有任何其他方法可以识别 DOM 中特定元素的属性在页面加载期间发生更改的时间或位置？或者跟踪特定属性？
在更改其属性的元素后立即放置一个带有 debugger 语句的脚本标记：
<div></div>
<script>debugger</script>
- 打开检查器重新加载页面
- 切换到元素选项卡并为元素添加属性删除断点
- 恢复脚本执行
DevTools 现在将突出显示更改属性的代码。
由于我的声誉不高，我需要为此创建一个答案，而不是评论。
如果
Break on... > Attributes Modifications
不适合您，@metarmask 的解决方案无法帮助您查看浏览器中的插件。我遇到了同样的问题，只是停用了所有插件，然后使用断点突然一切正常。
我正在管理一个 DNN 站点，并试图找到 "width: 100%" 应用于我主页上某些元素的内联样式的来源。 DNN 中包含一大堆难以手动解析的 JS 库，但我打开 Chrome 开发人员工具并在“源”选项卡中搜索页面上加载的每个 JS 文件以查看“ 100%”正在使用。没有骰子。
我知道 Break on... > Attributes Modifications 功能。这总是被引用为我在 SO 上发现的类似问题的解决方案：
How to track down javascript that is modifying the inline style of a div in the DOM?
How can I find out what script is setting my element's visibility to hidden?
Which JS added inline styles?
问题在于，与在“源”选项卡中调试 JavaScript 不同，当您刷新网页时，“元素”选项卡中 HTML 元素上的调试点会被擦除，而我的脚本尝试跟踪只在页面加载时运行一次，在运行时不会再运行一次，因此永远不会命中断点。
是否有任何其他方法可以识别 DOM 中特定元素的属性在页面加载期间发生更改的时间或位置？或者跟踪特定属性？
在更改其属性的元素后立即放置一个带有
debugger语句的脚本标记：<div></div> <script>debugger</script>- 打开检查器重新加载页面
- 切换到元素选项卡并为元素添加属性删除断点
- 恢复脚本执行
DevTools 现在将突出显示更改属性的代码。
由于我的声誉不高，我需要为此创建一个答案，而不是评论。
如果
Break on... > Attributes Modifications
不适合您，@metarmask 的解决方案无法帮助您查看浏览器中的插件。我遇到了同样的问题，只是停用了所有插件，然后使用断点突然一切正常。