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

Question

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

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

尝试选择Break on＆gt; Attributes modifications并重新加载页面，虽然这似乎没有做任何事情 - 这只适用于Class / ID更改吗？

Answer 1

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

Answer 2

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

• 开放检查员
• 转到“个人资料”标签
• 准备开始/停止按钮以记录您的操作的所有脚本
• 执行实际操作（鼠标悬停，点击，点按等）
• 检查分析器的“尖峰”，忽略一些框架启动的一个...（有一种方法可以将一些脚本列入黑名单，例如jQuery或者其他类似但我认为Google可以这样：）

HTH！