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

Tracking Down JavaScript that Applies Inline Style on Page Load(跟踪在页面加载时应用内联样式的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中特定元素的属性在页面加载期间何时或在何处更改？或者可能跟踪特定属性？

推荐答案

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

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

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

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

这篇关于跟踪在页面加载时应用内联样式的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！