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

Question

我目前在一个网站上工作，其中各种脚本正在修改 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 更改？

Answer 1

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