You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Chrome DevTools中快速查找CSS/JS代码的未使用部分及定位大文件中的已用代码片段

快速定位Chrome DevTools代码覆盖率中已使用的CSS代码

嘿,我完全懂你面对4000多行CSS文件找已用代码的痛苦——逐行翻真的太折磨人了!其实Chrome DevTools本身就自带实用技巧,能帮你快速定位、跳转已使用的代码片段,不用手动滚动浪费时间:

  • 第一步:确保覆盖率数据已录制完成
    先确认你已经点击Coverage面板里的红色录制按钮,完成页面交互后停止录制,这样才能得到准确的已使用/未使用代码标记。

  • 第二步:快速隐藏未使用代码,只看有效部分
    打开目标CSS文件(比如ssba.css)的源代码视图后,按下快捷键Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(Mac)打开命令菜单,搜索并执行Show Used CSS命令(中文界面对应“显示已使用的CSS”)。执行后,DevTools会自动折叠所有未被使用的代码行,只保留已生效的代码,瞬间把4000多行压缩成少量有效内容!

  • 第三步:在已使用代码间快速跳转
    如果需要在已使用的代码片段之间逐个跳转,右键点击源代码左侧的行号栏(gutter区域),选择**"Go to Next Used Line"(中文:“跳转到下一个已使用行”)或"Go to Previous Used Line"**(中文:“跳转到上一个已使用行”),就能直接跳到下一处/上一处有效代码,完全不用手动滚动。

另外,如果你需要搜索特定的已使用选择器,也可以用源代码视图的搜索功能(Ctrl+F/Cmd+F),在过滤后的已用代码里精准定位。

内容的提问来源于stack exchange,提问作者alancc

火山引擎 最新活动