如何找出在 Chrome 开发工具中添加样式属性的位置？

Posted 2023-02-22

【中文标题】如何找出在 Chrome 开发工具中添加样式属性的位置？

【英文标题】：How to find out where style attribute is added in Chrome dev tools?

【发布时间】：2016-03-14 14:29:47

【问题描述】：

我目前正在一个网站上工作，其中各种脚本正在修改 DOM（通过点击/悬停类型事件以及页面加载），更改元素的高度/宽度等，并试图找出哪些脚本正在影响哪些元素。例如，height: 9px 被添加到下面的<span> 元素中，我需要知道是什么脚本在执行此操作（当前使用 Chrome 开发工具，但如果另一个浏览器可以更好地完成此任务，我会打开）：

<span data-id="m_left_fitting_finish_filter" class="sidebar__filterBlock-title" style="height: 9px;">   

尝试选择 Break on > Attributes modifications 并重新加载页面，尽管这似乎没有任何作用 - 这仅适用于类/ID 更改吗？

【问题讨论】：

Firebug 2.0.3 for firefox...

@AnkitKathiriya 请您提供在 Firebug 中实现此功能的说明吗？

【参考方案1】：

打开console，选择Elements标签，在右侧面板选择Styles标签。应该列出加载了css 的文件。可以回到左侧面板，选择Sources标签；然后可以从最左侧面板中选择一个脚本，突出显示整个脚本，如有必要，右键单击，选择Add to Watch。或者，可以复制整个脚本，方法是在左侧面板中选择script，右键单击，选择Add Folder to Workspace，在文本编辑器中评估是否设置了height 属性。

【参考方案2】：

这是一个很好的问题，我希望视频也能对您有所帮助 (https://www.youtube.com/watch?v=vh-lZR2z_Lw&feature=youtu.be)，但您可以通过简单的步骤重现：

打开检查器 转到“个人资料”标签 准备好开始/停止按钮来记录你的所有脚本 执行实际操作（鼠标悬停、单击、点按等） 检查分析器的“尖峰”，忽略一些框架启动的...（有一种方法可以让您将一些脚本（如 jQuery 等）列入黑名单，但我认为您可以在 Google 上搜索 :)

hth！

【讨论】：

感谢您的回复，尽管在我的特定情况下，样式属性出现在加载时，而不是由操作触发，这使得查找起来有点棘手，除非有其他方法？跨度>

你可以确定按“开始”记录btn，刷新页面，然后“停止”查看页面加载事件

在我的特定情况下，该列表中有 100 个（在安装了各种模块的大型 Magento 网站上工作），仍然需要很长时间。目前正在研究其他浏览器必须提供的功能。