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

Question

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

我知道中断...＆gt;属性修改功能。这总是被引用为我在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现在将突出显示更改属性的代码。

Answer 2

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

如果

  

休息...＆gt;属性修改

不适合您，@ metarmask的解决方案无法帮助您查看浏览器中的插件。我有同样的问题，只是停用了所有插件，突然一切都运行正常，使用断点。