如何找出在 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>Attributes modifications并重新加载页面，尽管这似乎没有任何作用 - 这是否仅适用于类/ID 更改？

Answer 1

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