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

How to find out where style attribute is added in Chrome dev tools?

本文关键字：样式 添加 属性 位置 开发工具 何找 Chrome      更新时间：2023-09-26

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

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

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

打开console，选择Elements选项卡，在右侧面板选择Styles选项卡。应列出加载css的文件。可以移回左侧面板，选择Sources选项卡；然后可以从最左边的面板中选择一个脚本，高亮显示整个脚本，如果需要，右键单击，选择Add to Watch。或者，也可以复制整个脚本，方法是在左面板中选择script，右键单击，选择Add Folder to Workspace，在文本编辑器中为正在设置的height属性求值。

这是一个很好的问题，我希望视频也能有所帮助(https://www.youtube.com/watch?v=vh-lZR2z_Lw&feature=youtu.be），但在简单的步骤中，您可以复制以下内容：

  • 开放式检查员
  • 转到"配置文件"选项卡
  • 准备好启动/停止按钮，以记录有关操作的所有脚本
  • 执行实际操作（鼠标悬停、单击、点击等）
  • 检查profiler的"尖峰"，忽略一些框架启动的尖峰。。（有一种方法可以将jQuery等脚本列入黑名单，但我认为你可以在谷歌上搜索：）

啊！

相关文章：