跟踪在页面加载时应用内联样式的JavaScript
我正在管理一个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?
问题是,与在Sources选项卡中调试JavaScript不同,当您刷新网页时,Elements选项卡中的HTML元素上的调试点将被擦除,并且我试图跟踪的脚本只在页面加载时运行一次,并且在运行时不会再次运行,因此断点永远不会被命中。
是否有其他方法可以识别DOM中特定元素的属性在页面加载期间何时或在何处更改?或者可能跟踪特定属性?
解决方案
将带有
debugger
语句的脚本标记放在其属性发生更改的元素后面:<div></div> <script>debugger</script>
- 在检查器打开的情况下重新加载页面
- 切换到元素选项卡并向元素添加属性删除断点
- 继续执行脚本
DevTools现在将突出显示更改属性的代码。
相关文章