Chrome 插件提升前端效率：一份不水的工具清单和实战用法

做前端快十年了我观察到一件事大部分前端开发者浏览器里装了不少插件但真正吃透用法、融入日常工作流的不到三个。不是插件不好用是插件太多了。大家安装的时候觉得有用实际用的时候忘了它的存在。我今天聊的这份清单不列所有插件只列那些确实能改变工作方式、而且值得你花时间吃透的。每个我都会讲清楚用在什么场景、怎么用、有什么替代选择。按照一个前端项目的完整工作流来排——从接到设计稿到上线验收。一、设计与样式还原阶段让看设计这件事不再靠目测这个阶段最容易踩的坑是自己觉得调对了其实差很多。1. CSS Peeper / CSS Scan看到就能拿到场景看到一个网站的某个效果阴影、渐变、圆角觉得不错想看看它是怎么写的。很多人的做法是右键 → 检查 → 在密密麻麻的 Styles 面板里翻。CSS Peeper 和 CSS Scan 解决的正是这个问题——鼠标移上去文本样式、颜色、间距、阴影、渐变、背景图全部自动提取而且是 CSS 格式直接复制。CSS Peeper 的优势是免费、轻量适合日常快速翻看。CSS Scan 付费但更强鼠标悬停就能看到完整的 CSS 盒子模型点一下就能复制整段样式。实战用法遇到想偷的设计不要截图不要目测。直接用插件把它的 spacing、color、shadow 抓下来在你的 Design System 里找对应语义的 Token 映射过去。这不叫抄袭叫竞品参数拆解。2. WhatFont别再猜字体了字体识别是前端日常最琐碎的事情之一。WhatFont 解决了这个 pain point——鼠标悬停在任意文字上字体名、字号、字重、行高、颜色全部显示。更实用的功能是它可以一次性扫描全站的字体使用情况帮你快速了解一个站点的字体体系。实战用法在做字体选型或分析竞品设计系统时用 WhatFont 扫完全站统计出它用了哪些字体族、分别在什么场景用、字号梯度是什么。最后输出一份字体用量报告贴到需求文档里比截十张图有用。3. Web to Design让线上页面回到设计工具里编辑这是整个设计还原链路里最有意思的一个工具我详细说说。痛点你看到一个线上页面想分析它的间距策略、配色逻辑、信息层级。以前只能截图 手动量 肉眼估——或者直接用 DevTools 逐项看 Computed 样式效率很低。Web to Designdrawflare.comChrome 插件 Figma 插件做的事情是把浏览器里跑着的网页直接提取成 Figma 里可编辑的图层。DOM 结构、Computed 样式、图片资源、布局层级都会在 Figma 中原样还原平均 9 秒导入还原度 85%-95%。对前端来说最有价值的两个用法竞品拆解把竞品的线上页面拉到 Figma 里打开 Layers 面板一层层看它的间距策略内外边距的值、用什么单位、色彩体系直接取色、信息层级嵌套关系。这和 DevTools 看效果的本质区别是你在设计工具的语境里看它而不是在浏览器里。还原度验收上线后把页面拉回 Figma把源设计稿打开叠上去一帧一帧对比。这比肉眼对比截图可靠得多。免费版每月 10 次日常够用不需要一上来就付费。4. Figma Dev ModeInspect 升级版如果项目里用了 Figma不要只把 Figma 当看图工具用。打开 Dev Mode开发模式你能做的不只是看尺寸和导出切图直接查看组件的 CSS 属性padding、margin、gap、flex复制任何 layer 的样式为 CSS、iOS、Android 格式看到组件之间的嵌套关系和 Variants 状态它和上一条 Web to Design 是互补关系Figma Dev Mode 帮你把设计稿里的属性拿到代码里Web to Design 帮你在代码跑出来后验证它有没有偏。这两样东西加在一起前端和设计之间的翻译损耗能降到最低。二、开发与调试阶段把 DevTools 之外的工具补上Chrome DevTools 很强但有几个场景它不太顺手这时候专门的插件就派上用场了。5. React Developer Tools必须装的不解释这个不需要我多介绍。但我想提醒一个不太多人用的功能Profiler 面板。不只是看组件树打开 Profiler 录一段操作你能看到每次 commit 的渲染耗时、哪些组件在不需要的时候重新渲染了、耗时都花在了哪个 props 变化上。实战用法团队 code review 时常说这里可能产生不必要的重渲染但说不清到底重渲染了多少次、影响了多少个子组件。用 React DevTools Profiler 录一段直接截图贴到 PR 评论里这个 onChange 触发了 18 个子组件的非必要更新——证据比猜想有说服力。6. Redux DevTools状态管理必装如果你项目里用了 Redux 或 ZustandRedux DevTools 提供的时间旅行调试(Time Travel Debugging)是原生 DevTools 给不了的。它不只是看当前状态而是可以回到任意一个 Action 之前的状态查看那次 Action 到底改了什么东西。实战用法用户反馈了一个 bug 点保存按钮后页面数据不对。你用 Redux DevTools 先导出 action 日志然后一步步重放找到那个罪魁祸首的 mutation——正是这个 mutation 意外修改了不该改的字段。修复 cost10 分钟。如果靠打断点堆 log 来找至少一小时。7. Vue DevTools逻辑和 React DevTools 类似但有几个独特功能值得专门提一下Timeline 面板可以查看事件、组件更新和 Pinia 操作的时间轴Events 面板可以查看组件之间 emit 的所有事件。这在调试 Vue 的跨组件通信时尤其有用。8. React Scan / Reactime定位性能瓶颈的利器React Scan 是 2025 年出来之后迅速被接受的一个轻量工具——它不打乱你的代码结构安装即用在页面上用色块标出哪些组件在渲染上花了最长时间。红色 严重橙色 需要注意绿色 良好。一个前端团队要优化首屏性能用它扫一遍优先级就排出来了不需要靠经验猜。三、性能与质量阶段上线前最后一关9. Lighthouse不只是跑分工具很多人把 Lighthouse 当成跑个分就结束了但它的价值不在分数在诊断报告。每次跑完点开 Diagnostics 和 Passed Audits找到那些红色的优化建议——尤其是 Largest Contentful Paint 和 Cumulative Layout Shift 这两个指标——通常对应的都是真实需要改的问题。实战用法把 Lighthouse 报告接入 CIGitHub Actions 里有现成的 action每次 PR 合并前自动跑一次如果性能指标下降就 block 合并。这比上线后发现问题再回滚的成本低一个数量级。10. axe DevTools无障碍检测无障碍Accessibility在很多团队里优先级排得很低直到合规需求来了不得不做。axe DevTools 是处理这个需求最落地的工具——它不只会告诉你这里有 a11y 问题还会告诉你具体违反的是 WCAG 的哪条标准、为什么、怎么修。实战用法在开发的功能完成 → 上线之间强制加一道axe 检查流程。用 axe 扫一遍完整页面把高严重度的问题missing label、color contrast 不足、键盘不可操作在代码审查阶段就修完不要拖到 QA 再发现。四、辅助与生产力阶段那些用了就回不去的小工具11. Wappalyzer技术栈探测看到一个网站做得不错想了解它用了什么技术栈Wappalyzer 一键扫描前端框架、后端语言、CMS、Analytics、CDN——全部分类展示准确率很高。实战用法竞品分析时多一个维度——他们用了 Next.js 配 Tailwind可能团队规模应该不大接触一个新客户的项目时先扫一遍它的技术栈再判断自己能不能接。12. JSON Viewer让 API 返回变得可读Chrome 渲染 JSON 的默认方式就是一屏白字没有缩进、没有折叠、没有高亮。JSON Viewer 解决的问题很简单格式化 代码高亮 节点折叠 路径复制。任何一个需要频繁调试 API 的前端都应该装。13. Page Ruler量尺寸有时需求方的要求是这个区域和那个区域距离再大一点但大多少说不清楚。Page Ruler 能在页面上拉起一把虚拟尺子精确到像素级别地量元素尺寸和间距。不需要再截图到 PS 里面量了。14. ColorPick Eyedropper取色器取色这件事在设计和前端协作中几乎每天都在发生。ColorPick 做的是一件事在页面任意位置取色直接给出 HEX 和 RGB。适合快速确认这个颜色设计稿上用的是不是到了线上偏离了——结合 Web to Design 的还原度验收这个流程会更顺畅你把页面拉回 FigmaColorPick 在页面上取关键色值做交叉验证。15. Requestly接口 Mock 与重定向在前后端分离的开发模式下后端接口还没好是常态。Requestly 能做的事拦截特定的 API 请求并返回 Mock 数据把某个请求重定向到另一个地址比如本地开发服务注入自定义脚本或样式到页面上它比 Charles 轻量得多不需要代理配置。前端开发自己就能把等接口变成先 Mock不阻塞开发节奏。五、怎么把这些插件融入工作流而不是装完吃灰很多人的问题是插件装了但没有成为习惯。我的建议是按阶段绑定不要一次性上所有接手新项目的第一天装 Wappalyzer 扫技术栈、装 Web to Design 把线上页面拉回 Figma 做设计分析、装 CSS Peeper 看现存组件的样式实现。开发阶段常驻React DevTools / Vue DevTools Redux DevTools 开一个窗口常驻React Scan 装好但不常开性能告急时启用。准备上线前Lighthouse 扫性能、axe DevTools 扫无障碍、Web to Design 做最后一遍还原度验收把线上页面和设计稿叠层对比。日常工作中顺手用JSON Viewer看到 JSON 自动格式化、ColorPick随时取色对比、Page Ruler量尺寸、WhatFont看字体。推荐的首发组合不用多想装了立刻有用的设计侧Web to Design CSS Peeper WhatFont ColorPick开发侧React/Vue DevTools Redux DevTools JSON Viewer质量侧Lighthouse axe DevTools React Scan生产力侧Wappalyzer Page Ruler Requestly这 11 个插件覆盖了从看设计到测性能的全链路。不需要都装但每个方向至少挑一个吃透工作流体验会有质的提升。写在最后Chrome 插件的价值不在于装得多而在于在正确的时刻出现在正确的位置。一个好的插件能让一个十分钟的重复劳动变成十秒的一次点击。自己搭建一套趁手的插件组合本质上是在为自己定制一套工程提效系统——花一个小时配好省的是之后每周数小时的时间。从上面推荐的首发组合里挑一件今天就装上。第二天你就知道值不值了。