我正在管理一个 DNN 网站,并试图找到应用于主页上某些元素的“width: 100%”内联样式的来源。 DNN 中包含一大堆难以手动解析的 JS 库,但我打开了 Chrome 开发者工具,并在“源”选项卡中搜索了页面上加载的每个 JS 文件,以查看“100%”在哪里正在使用。没有骰子。
我知道“中断...”>“属性修改”功能。这总是被引用为我在 SO 上发现的类似问题的解决方案:
如何追踪正在修改 DOM 中 div 内联样式的 javascript? https://stackoverflow.com/questions/27645377/how-to-track-down-javascript-that-is-modifying-the-inline-style-of-a-div-in-the
查找 Javascript 应用的内联样式来调试 Javascript https://stackoverflow.com/questions/29657953/finding-javascript-applied-inline-styles-to-debug-javascript
如何找出哪个脚本将我的元素的可见性设置为隐藏? https://stackoverflow.com/questions/7491380/how-can-i-find-out-what-script-is-setting-my-elements-visibility-to-hidden
哪些JS添加了内联样式? https://stackoverflow.com/questions/26997815/which-js-added-inline-styles
问题在于,与在“源”选项卡中调试 JavaScript 不同,刷新网页时,“元素”选项卡中 HTML 元素上的调试点会被擦除,并且我尝试跟踪的脚本仅在页面加载时运行一次,再也不会运行在运行时,所以断点永远不会被命中。
是否有其他方法可以识别 DOM 中特定元素的属性在页面加载期间何时何地发生变化?或者也许跟踪特定属性?
-
放置一个脚本标签debugger
紧随其属性更改的元素之后的语句:
<div></div>
<script>debugger</script>
- 在检查器打开的情况下重新加载页面
- 切换到元素选项卡并向元素添加属性删除断点
- 恢复脚本执行
DevTools 现在将突出显示更改属性的代码。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)