通用小工具系列Homebrew官网地址brew.sh/HomeBrew是Mac下面的一个包管理器方便我们安装一些Mac OS没有的UNIX工具、软件一键安装应用十分方便比如命令行直接安装QQiterm2官网地址www.iterm2.com/Iterm2 用来代替系统自带的Terminal提高工作效率~uTools官网地址u.tools/提高工作效率的又一大神器跨平台插件非常多像查个JavaScript免费图床啊都有强推这个工具基本上能解决掉你日常工作能够用到的所有的零碎小功能~本文最强推荐的一个工具就是这个没装的小伙伴一定要去试试真的超赞Snip官网地址snip.qq.com/腾讯的一个轻量级的截屏软件浏览器滚屏截图也支持哦~用起来还行~CleanMyMac X官网地址macpaw.com/cleanmymac清理 Mac协作软件的不二之选十分强大1 Password官网地址1password.com/zh-cn/这个密码管理的工具是被做安全朋友强推滴很好用强推强推 再也不用担心密码想不起来了再也不用担心密码泄露了~关于安全问题大家可以放心已经咨询过专业的安全朋友没毛病~~xclient官方地址xclient.info/里面汇聚了很多mac软件并且都提供破解的方式小伙伴们可以自取所需~笔记系列Notion官网地址 www.notion.so/desktop作为一名前端这种颜值高的笔记本是一定要拥有滴啦~~将笔记、知识库和任务管理无缝整合的协作平台颜值超高超好用。当然印象笔记也不错哦不过 Notion 功能更加丰富与强大~Typora官网地址www.typora.ioTypora是一款写Markdown的工具好用到不行配合下面的ipic图床直接爽翻天~怪怪所有的文章都是在这个上面写滴~Ipic官网地址 ipic.ca上面的 Typora 美中不足的就是图片是本地的地址发到网上就会失效。使用 Ipic 的免费图床就可以解决啦~Ipic 的免费图床是新浪滴如果失效的话可以自行配置X里云 OSS很便宜~Markdown 格式美化官网地址www.npmjs.com/package/lin…一个npm包通过命令将 Markdown文件中中英文进行隔开基于 AST 开发且方便集成 ci就很有规范很有格局很好看了~有兴趣的小伙伴还可以去研究一下源码~抓包系列Charles官网地址www.charlesproxy.com/抓包必备神器实际上就是个代理服务器跟后端联调有问题先抓包看看准没错~Mock 接口数据也可以用这个工具map local 到本地自己写的 json 文件即可wireshark官网地址www.wireshark.org/也是用来抓包滴不过抓的是网络层的~偶尔做一些网络层优化的时候这个工具就可以派上用场啦哈~UI 系列ProcessOn官网地址www.processon.com/怪怪所有文章里面画图都是用这个神器各种原型图思维导图网络拓扑图都支持日常开发先画个图理一下思路还是很有必要滴~下面是怪怪之前写 Node.js 秒杀系统画的图~Sketch官网地址www.sketch.com/get/一般企业产品级的东西都是用 sketch 设计啦~~这个工具做出来的ppt那也是一绝再也不用为ppt烦恼了~~Zeplin官网地址zeplin.io/一些日常的H5活动用这个工具或者下面要说的 Adobe Photoshop CC 2019Adobe Photoshop CC 2019官网地址 www.adobe.com/cn/products…Ps嘛大家都知道的没事帮妹子P下图搞不好能找个女朋友啥滴~~开发系列Devdocs官网地址devdocs.io开发技术文档直接在线快速搜索哦十分方便~各种技术文档都很齐全CodeLF官网地址 unbug.github.io/codelfGItHub的一个爬虫工具估计不少小伙伴开发时都会苦恼给方法取名字这个网站直接给你一步到位多种选择。再也不怕写代码的时候取方法名啦~SwitchHosts官方地址github.com/oldj/Switch…前端开发中总是要不断切换各种环境线下预发线上那这个小工具就是为你量身定做滴~~SwitchHosts 其实也不是很完美真正企业里面我觉得应该有一套统一的host切换工具什么线下环境啊预发环境啊都统一在远端进行配置。怪怪正在开发中后面会开源出来极简二维码地址chrome 扩展商店中搜索【极简二维码】添加到 chrome 插件开发H5页面的时候总是需要在移动端访问在pc端开发的页面这个小工具直接生成当前网页的二维码扫一扫就很快乐~~比如下面的蘑菇街主页。Visual Studio Code官网地址code.visualstudio.comVisual Studio Code是一个轻量且强大的跨平台开源代码编辑器IDE支持WindowsOS X和Linux。内置JavaScript、TypeScript和Node.js支持而且拥有丰富的插件生态系统可通过安装插件来支持C、C#、Python、PHP等其他语言。占据了前端大部分的市场~ 写代码的不二之选~~WebStorm官网地址www.jetbrains.com/webstorm/虽然 Visual Studio Code 很强大但怪怪还是喜欢用 WebStormWs 会有点耗内存如果是windows用户就直接选择 Vs 了。下面的项目是最近会发的文章源码哦~~n官网地址www.npmjs.com/package/n切换 node 版本的一个 npm 包轻量好用你要想用nvm也行这个没啥大影响哈~听朋友说蚂蚁金服内部有自己的一套切换的工具不用nvm也不用nLighthouse官网地址developers.google.com/web/tools/l…自动化页面性能分析工具会给你分析出当前页面哪些是需要优化的地方并且提供优化方案~ 很实用我们来给 apple 官网跑个分好像好不错~移动端调试官网地址developers.google.com/web/tools/c…网上也有很多各种移动端调试的工具不过怪怪还是想推荐一下这种方式哦方便及时响应~FeHelper官方地址github.com/zxlie/FeHel…一款 chrome 插件集合了一些日常会用的功能集合很棒~什么正则啊时间戳转换啊这一系列开发时会用到的几乎都有~~Intellij IDEA官网地址 www.jetbrains.com/idea前端偶尔遇到需要自己写写 Java 的情况那就用这个工具准没错巨强大~Navicat Premium官网地址 www.navicat.com.cn在用 Node.js 做一些小项目需要用到数据库的时候这个数据库的可视化工具用起来就是真滴很香~~Postman官网地址 www.getpostman.com接口调试神器后端大佬们接口还没写好的时候这个工具用来给前端小伙伴mock一下api还是蛮不错的哦~不过很多公司都有自研的数据mock平台啦~总结本文已收录 Github https://github.com/ponkans/F2E欢迎 Star持续更新上面分享的这些工具都是怪怪工作中经常用并且觉得还不错的工具。分享给大家希望能给大家带来一些工作效率上的提升~~近期在写 Node.js 的系列传送门《大前端进阶 Node.js》系列 必知、必会、必问《大前端进阶 Node.js》系列 双十一秒杀系统进阶必看《大前端进阶 Node.js》系列 多进程底层原理字节跳动被问前言在大厂前端开发的日常中“工具链”的熟练度直接决定了开发效率和问题排查能力。无论是定位一个棘手的线上Bug、模拟复杂的后端接口数据还是优化首屏加载性能合适的工具往往能起到事半功倍的效果。本文将从网络抓包、代码调试、Mock数据、接口管理、性能分析、版本控制、IDE 提效、自动化构建八大维度为你盘点大厂前端工程师真正高频使用的必备工具并附上实战技巧与配置建议。一、 网络抓包与代理工具在前后端分离的开发模式下抓包工具是定位接口问题、查看网络请求细节、模拟弱网环境、甚至修改请求与响应的利器。1. Whistle关键词跨平台、功能强大、基于Node、规则配置灵活Whistle 是目前大厂前端使用最广泛的抓包代理工具之一基于 Node.js 实现支持 HTTP/HTTPS/WebSocket 等协议的抓包与修改。核心特性代理与抓包一体化启动后自动设置系统代理捕获所有网络请求。规则配置通过类似于 Hosts 的规则文件实现请求转发、替换、注入、Mock 等。移动端调试手机设置代理后可捕获移动端 H5 页面的网络请求。HTTPS 支持一键安装根证书支持 HTTPS 请求的解密与查看。插件生态支持通过插件扩展功能如 Mock 数据、接口自动化测试等。常用场景本地开发代理将线上域名指向本地127.0.0.1实现本地调试线上页面。接口 Mock直接拦截特定接口返回预设的 JSON 数据。替换资源将远程 JS/CSS 替换为本地文件方便调试样式与逻辑。模拟弱网设置延迟规则模拟 2G/3G/4G 网络环境。实战配置示例bash# 安装 whistle npm install -g whistle # 启动 whistle w2 start # 打开管理界面 http://127.0.0.1:8899常用规则在 Rules 中配置text# 将 api.example.com 指向本地 mock 服务 api.example.com 127.0.0.1:3000 # Mock 一个接口返回 https://api.example.com/user/info resBody://{name: whistle, age: 18} # 替换线上 JS 文件为本地文件 https://cdn.example.com/main.js file:///Users/xxx/local/main.js # 模拟网络延迟 2 秒 www.example.com delay://2000高级技巧Values 功能将 Mock 数据存储在 Values 中通过resBody://{valueName}引用便于维护多套 Mock 数据。组合规则reqScript可执行自定义脚本实现复杂的请求/响应处理逻辑。多环境切换通过Group分组管理不同环境的规则集一键切换开发/测试/预发环境。2. Charles关键词老牌、图形化界面、流量限制、重放功能Charles 是一款老牌的抓包工具以其强大的图形化界面和稳定性著称尤其适合对命令行不太熟悉的开发者。核心特性SSL 代理支持 HTTPS 抓包需安装根证书。带宽限制内置弱网模拟支持自定义上行/下行速率。断点调试可对请求或响应设置断点手动修改后再放行。重复请求支持对选中的请求进行重复发送便于接口调试。Map Local/Remote将远程请求映射到本地文件或其他地址。适用场景移动端 H5 调试配合手机代理抓取微信/App 内嵌页面的请求。接口分析分析接口耗时、数据包大小、状态码等。线上问题复现通过重放请求验证接口是否异常。注意事项Charles 为付费软件免费版有 30 分钟使用限制和弹窗。在 M1/M2 Mac 上安装需注意兼容性。3. Chrome DevTools Network Panel关键词浏览器内置、零配置、快速定位对于简单的抓包需求Chrome DevTools 的 Network 面板是最快捷的选择。核心功能请求概览查看所有请求的 URL、状态码、协议、耗时、传输大小。请求详情Headers、Payload、Preview、Response、Timing。保留日志勾选Preserve log页面跳转后日志不会清空。模拟网络在Network conditions中模拟 3G/4G 或离线状态。阻断请求通过Block request URL阻断特定请求测试降级逻辑。最佳实践快速过滤使用CtrlF或CmdF在请求列表中搜索关键词。导出 HAR将请求列表导出为 HAR 文件可分享给后端同事或用于性能分析。Waterfall 分析通过瀑布图分析资源加载顺序定位性能瓶颈。二、 代码调试工具调试是前端开发的核心技能除了基础的console.log大厂前端更倾向于使用更高效、更强大的调试工具。1. Chrome DevTools (Sources Panel)关键词断点调试、Source Map、Watch、Call StackChrome DevTools 的 Sources 面板是前端调试的核心阵地。核心功能断点调试代码行断点点击行号设置程序执行到该行暂停。条件断点右键行号设置表达式满足条件时才暂停。DOM 断点元素面板中对 DOM 节点设置子节点修改、属性变化等断点。XHR/Fetch 断点在 Sources 面板的 XHR/fetch Breakpoints 中输入 URL 关键词拦截请求。Source Map生产环境代码通常经过压缩混淆通过 Source Map 可在浏览器中直接调试原始源码。Watch监视表达式变化实时查看变量值。Call Stack查看函数调用栈定位代码执行路径。Scope查看当前作用域内的所有变量。黑盒脚本将第三方库脚本标记为“黑盒”调试时自动跳过只关注业务代码。高级技巧Logpoint在不打断程序执行的情况下在控制台输出日志。右键行号选择“Add logpoint”。Live Expression在 Sources 面板上方点击“眼睛”图标输入表达式实时查看其值变化。Overrides在 Sources 面板的 Overrides 标签中可以保存对线上资源的修改到本地实现持久化调试。2. React DevTools / Vue DevTools关键词组件树、Props/State、性能分析对于使用主流框架的项目框架专属的 DevTools 是必备的。React DevTools组件树查看组件层级、组件名称。Props State实时查看和修改组件的 props 和 state。Hooks查看 Hooks 的值包括useState、useEffect、自定义 Hook 等。性能分析Profiler 面板记录组件渲染时间、渲染次数帮助定位性能瓶颈。高亮更新在设置中开启“Highlight updates when components render.”页面中发生重绘的组件会被高亮显示。Vue DevTools组件树支持 Vue 2/3展示组件层级和组件名称。数据查看查看和动态修改 data、props、computed、vuex/pinia 状态。时间旅行对于 Vuex/Pinia支持状态回溯。性能分析记录组件渲染性能。路由跟踪查看当前路由信息及路由历史。3. 移动端调试工具移动端 H5 调试是前端的难点以下工具可有效降低调试成本。vConsole腾讯出品的轻量级移动端调试面板只需引入一个 JS 文件即可在手机页面上看到 Console、Network、Element、Storage 等面板。htmlscript srchttps://cdn.jsdelivr.net/npm/vconsole/script script var vConsole new VConsole(); /scripteruda功能类似 vConsole界面更美观插件丰富如支持显示性能数据、捕获页面截图等。Chrome Remote Devices通过 USB 连接 Android 手机在 Chrome 的chrome://inspect中可以像调试 PC 页面一样调试手机 Chrome 或 WebView 中的页面。Safari Web InspectoriOS 设备通过 USB 连接 Mac在 Mac Safari 的“开发”菜单中可以调试 iPhone 上的 Safari 或 WKWebView。4. VS Code Debugger直接在 IDE 中打断点调试前端代码无需切换到浏览器 DevTools。配置示例Launch Chrome在.vscode/launch.json中配置json{ version: 0.2.0, configurations: [ { type: chrome, request: launch, name: Launch Chrome against localhost, url: http://localhost:3000, webRoot: ${workspaceFolder}/src, sourceMapPathOverrides: { webpack:///src/*: ${webRoot}/* } } ] }设置断点后按 F5 启动调试VS Code 会打开 Chrome 并自动关联断点。三、 Mock 数据方案在前端开发中后端接口往往滞后或某些异常场景难以触发Mock 数据能力决定了前端能否独立高效地推进开发。1. Mock.js关键词随机数据、语法简洁、拦截 AjaxMock.js 是最早流行的 Mock 库通过重写XMLHttpRequest和fetch拦截请求并返回随机生成的数据。核心语法javascriptimport Mock from mockjs; Mock.mock(/api/user, get, { code: 200, data: { name: cname, // 随机中文名 age|18-60: 1, // 年龄 18-60 之间 email: email, // 随机邮箱 avatar: image(200x200), address: city(true) } });优点语法简单学习成本低。支持生成丰富的随机数据图片、姓名、日期等。与框架无关可独立运行。缺点拦截的是 XHR 和 fetch无法 mock 原生 XMLHttpRequest 之外的方式如 WebSocket。数据随机无法保持状态一致性。2. YApi关键词接口管理平台、可视化、Mock 优先YApi 是去哪儿网开源的可视化接口管理平台目前在大厂内部广泛使用。它集成了接口文档管理、Mock 服务、自动化测试等功能。核心特性可视化接口定义通过 Web 界面定义接口的请求参数和响应结构。自动 Mock根据定义的 JSON Schema自动生成 Mock 数据。高级 Mock支持 Mock.js 语法可编写自定义 Mock 脚本。Swagger 导入支持导入 Swagger/OpenAPI 规范一键生成接口。权限管理支持项目分组、成员权限控制。自动化测试内置测试集可对接口进行回归测试。使用流程部署或使用公共 YApi 服务也可使用本地 Docker 启动。创建项目定义接口路径、方法、请求参数、响应结构。前端通过 YApi 提供的 Mock 地址如http://yapi.com/mock/{projectId}/api/user发起请求。后端开发完成后将 Mock 地址切换为真实地址。优势前后端协作桥梁接口定义统一在平台管理避免文档与代码脱节。Mock 与真实切换方便只需改变 baseURL无需修改业务代码。3. 本地 Mock 服务Express/Koa Whistle对于复杂场景可自建本地 Mock 服务结合 Whistle 代理实现更灵活的 Mock 能力。示例Express Mock Serverjavascriptconst express require(express); const app express(); app.get(/api/user, (req, res) { res.json({ code: 200, data: { name: Mock User, role: admin } }); }); app.post(/api/login, (req, res) { const { username, password } req.body; if (username admin password 123456) { res.json({ code: 200, token: fake-jwt-token }); } else { res.status(401).json({ code: 401, message: 用户名或密码错误 }); } }); app.listen(3000, () { console.log(Mock server running at http://localhost:3000); });然后通过 Whistle 将接口代理到本地 Mock 服务。4. 前端代码内 Mock适配器模式在代码层面封装请求层通过环境变量切换数据源。javascript// request.js const isMock process.env.NODE_ENV development process.env.USE_MOCK true; if (isMock) { // 引入 mock 数据 export default function request(url, options) { return import(./mock/${url}.js).then(module module.default); } } else { // 真实请求 export default function request(url, options) { return fetch(url, options).then(res res.json()); } }这种方式适用于简单项目且 Mock 数据与业务代码分离但需注意维护成本。四、 接口管理与文档工具除了 Mock接口的规范管理和文档沉淀也是大厂工程化的关键一环。1. Swagger (OpenAPI)关键词规范、自动生成文档、前后端统一Swagger 是一套围绕 OpenAPI 规范的工具集后端通过注解或配置生成接口文档前端可直接查看并在线调试。优势文档即代码接口变更自动同步到文档避免文档过期。在线调试可直接在 Swagger UI 上发起请求验证接口。代码生成可根据 OpenAPI 文件自动生成前端 API 调用代码如通过swagger-typescript-api。实践建议推动后端使用 Swagger 规范输出接口文档。前端可将 OpenAPI JSON 文件导入到 YApi 或 Apifox 中进行二次管理。2. Apifox关键词一体化协作平台、API 设计、调试、Mock、文档Apifox 是近年来崛起的 API 协作平台定位是“Postman Swagger Mock JMeter”的集合体。核心功能接口设计可视化的接口定义支持 OpenAPI 3.0 规范。接口调试内置请求发送功能类似于 Postman。自动 Mock根据定义的数据模型自动生成 Mock 数据。文档生成自动生成可交互的 API 文档。自动化测试支持编写测试用例集成到 CI/CD。团队协作支持云端同步、成员权限管理。适用场景前后端分离团队需要统一的接口管理工具。希望在一个平台上完成从设计、调试、Mock 到测试的全流程。3. Postman虽然 Postman 更偏向接口调试但其强大的集合管理和环境变量功能使其也成为前端常用的工具之一。常用功能集合Collection将相关接口分组管理便于维护。环境变量切换开发/测试/生产环境。预请求脚本 测试脚本在请求前设置动态参数在请求后编写断言进行自动化测试。Runner批量运行集合中的请求用于回归测试。生成代码可将请求转换为 curl、JavaScript、Python 等多种语言的代码片段。五、 性能分析与监控工具前端性能直接影响用户体验和转化率大厂对性能的追求近乎苛刻。1. Lighthouse关键词自动化、评分、优化建议Lighthouse 是 Google 出品的开源自动化工具用于改进网页质量。可从性能、可访问性、最佳实践、SEO、PWA 五个维度对网页进行评分并给出优化建议。使用方式Chrome DevToolsLighthouse 面板点击“Generate report”。Node CLIlighthouse https://example.com --viewCI 集成可将 Lighthouse 集成到 CI 流程中防止性能回归。核心指标Core Web VitalsLCP (Largest Contentful Paint)最大内容绘制时间衡量加载性能理想值 2.5s。INP (Interaction to Next Paint)交互响应时间衡量交互流畅度理想值 200ms。CLS (Cumulative Layout Shift)累计布局偏移衡量视觉稳定性理想值 0.1。2. WebPageTest关键词多地点、多浏览器、详细瀑布图WebPageTest 是一款在线性能测试工具支持从全球多个地点、不同设备/浏览器上测试网页性能。核心价值首屏视频可回放页面加载过程的视频直观感受加载体验。详细瀑布图每个请求的 DNS、TCP、SSL、请求发送、等待、下载各阶段耗时。比较测试可同时对比两个页面的性能差异。自定义脚本支持登录、点击等用户交互脚本。3. Performance API在代码层面可以使用浏览器 Performance API 精确测量关键节点。javascript// 标记时间点 performance.mark(start-fetch); await fetch(/api/data); performance.mark(end-fetch); performance.measure(fetch-duration, start-fetch, end-fetch); const measure performance.getEntriesByName(fetch-duration)[0]; console.log(请求耗时: ${measure.duration}ms); // 清除标记 performance.clearMarks(); performance.clearMeasures();4. Sentry关键词错误监控、性能监控、线上问题定位Sentry 是一款开源的错误监控平台可实时捕获前端异常并上报到后台帮助开发者在用户反馈前发现问题。核心功能错误捕获自动捕获 JS 异常、Promise 拒绝、资源加载失败等。Source Map 解析上传 Source Map 后可还原错误堆栈到原始源码位置。性能监控记录页面加载、API 请求、自定义事务的耗时。用户反馈用户可提交反馈关联到具体错误。告警配置错误阈值通过邮件、钉钉、飞书等渠道告警。接入示例javascriptimport * as Sentry from sentry/react; import { BrowserTracing } from sentry/tracing; Sentry.init({ dsn: YOUR_DSN, integrations: [new BrowserTracing()], tracesSampleRate: 1.0, // 生产环境建议调低 environment: process.env.NODE_ENV, release: my-project-name1.0.0 });六、 版本控制与协作工具1. Git无可争议的版本控制标准。除了基本的add/commit/push大厂前端更注重 Git 工作流的规范。常用高级操作交互式 rebasegit rebase -i HEAD~3合并 commit、修改 commit message。cherry-pickgit cherry-pick commit-hash将特定提交应用到当前分支。bisectgit bisect start二分查找引入 bug 的提交。refloggit reflog找回丢失的 commit。Git 规范分支命名feature/xxx、bugfix/xxx、hotfix/xxx。commit message 规范使用 Conventional Commits如feat: 添加登录功能、fix: 修复白屏问题、docs: 更新 README。pre-commit 钩子通过 husky lint-staged 在提交前进行代码检查、格式化。2. GitLab / GitHub代码托管平台不仅是存储代码的地方更是协作的中心。核心功能Merge Request / Pull Request代码审查、CI 状态检查、合并前讨论。Issue任务分配、Bug 跟踪。CI/CD通过 GitLab CI 或 GitHub Actions 自动化构建、测试、部署。Wiki项目文档沉淀。七、 IDE 与编辑器提效工具大厂前端普遍使用 VS Code并搭配丰富的插件形成自己的开发“武功”。1. VS Code 必备插件ESLint实时检查代码规范高亮不符合规则的代码。Prettier代码格式化保存时自动格式化统一团队代码风格。GitLens增强 Git 功能查看每行代码的提交信息、作者、时间。Thunder Client轻量级 API 测试插件替代 Postman。Turbo Console Log快速插入console.log并自动命名。Better Comments高亮 TODO、FIXME 等注释。Import Cost显示导入包的大小避免引入过大的依赖。Code Runner运行代码片段快速验证小逻辑。2. 代码片段Snippets自定义常用代码片段提高开发效率。例如在javascript.json中配置一个 React 函数组件的 snippetjson{ React Functional Component: { prefix: rfc, body: [ import React from react;, , interface ${1:ComponentName}Props {, $2, }, , const ${1:ComponentName}: React.FC${1:ComponentName}Props ($3) {, return (, div, $4, /div, );, };, , export default ${1:ComponentName}; ], description: Create a React functional component with TypeScript } }3. 命令行工具iTerm2 Oh My ZshMac 下最强大的终端组合配合主题和插件如git、z、autosuggestions提升命令行操作效率。npm scripts将常用命令封装在package.json的 scripts 中如dev、build、test、lint。npx直接运行 npm 包命令无需全局安装如npx create-react-app my-app。八、 自动化构建与持续集成前端工程化离不开自动化构建和 CI/CD 流程。1. 构建工具Webpack最主流的模块打包器配置灵活生态丰富。Vite基于 ESBuild 的极速开发服务器冷启动和热更新速度远超 Webpack已在 Vue 3、React 等项目中广泛应用。esbuildGo 语言编写速度极快常被用作底层打包器。Rollup专注于库打包输出代码更纯净Vue/React 等库均使用 Rollup 构建。2. CI/CD 工具GitHub Actions与 GitHub 仓库深度集成通过 YAML 文件定义工作流。GitLab CI与 GitLab 集成.gitlab-ci.yml定义流水线。Jenkins老牌 CI 工具插件丰富适合复杂流水线。典型 CI 流程代码提交- 触发流水线。安装依赖npm ci使用package-lock.json保证一致性。代码检查npm run lint。单元测试npm run test。构建npm run build。部署将构建产物上传到 CDN 或服务器。通知通过飞书/钉钉机器人通知构建结果。3. 代码质量工具ESLintJS/TS 代码规范检查支持自定义规则和插件。Prettier代码格式化与 ESLint 配合使用避免格式争议。StylelintCSS/SCSS/Less 规范检查。Husky lint-staged在 Git commit 前只对暂存区文件进行 lint 和格式化避免全量检查耗时过长。Commitlint检查 commit message 是否符合规范。写在最后前端工具链的发展本质上是为了解决“工程化”和“效率”的问题。从网络抓包到接口 Mock从代码调试到性能监控每一个环节的工具选择都反映了一个团队的工程化成熟度。给初学者的建议不要贪多先精通几个核心工具如 Chrome DevTools、Whistle、Git、ESLint再逐步扩展。给进阶者的建议尝试理解工具背后的原理如代理原理、Source Map 原理、构建工具原理这样才能在遇到工具无法覆盖的问题时自己动手解决问题。给团队的建议建立统一的工具链规范和最佳实践文档减少个人偏好带来的协作成本将工具的威力真正转化为团队的交付效率。
《吐血整理》系列 大厂前端必备工具集合（抓包、调试、Mock数据等等）
发布时间：2026/5/23 23:14:33
通用小工具系列Homebrew官网地址brew.sh/HomeBrew是Mac下面的一个包管理器方便我们安装一些Mac OS没有的UNIX工具、软件一键安装应用十分方便比如命令行直接安装QQiterm2官网地址www.iterm2.com/Iterm2 用来代替系统自带的Terminal提高工作效率~uTools官网地址u.tools/提高工作效率的又一大神器跨平台插件非常多像查个JavaScript免费图床啊都有强推这个工具基本上能解决掉你日常工作能够用到的所有的零碎小功能~本文最强推荐的一个工具就是这个没装的小伙伴一定要去试试真的超赞Snip官网地址snip.qq.com/腾讯的一个轻量级的截屏软件浏览器滚屏截图也支持哦~用起来还行~CleanMyMac X官网地址macpaw.com/cleanmymac清理 Mac协作软件的不二之选十分强大1 Password官网地址1password.com/zh-cn/这个密码管理的工具是被做安全朋友强推滴很好用强推强推 再也不用担心密码想不起来了再也不用担心密码泄露了~关于安全问题大家可以放心已经咨询过专业的安全朋友没毛病~~xclient官方地址xclient.info/里面汇聚了很多mac软件并且都提供破解的方式小伙伴们可以自取所需~笔记系列Notion官网地址 www.notion.so/desktop作为一名前端这种颜值高的笔记本是一定要拥有滴啦~~将笔记、知识库和任务管理无缝整合的协作平台颜值超高超好用。当然印象笔记也不错哦不过 Notion 功能更加丰富与强大~Typora官网地址www.typora.ioTypora是一款写Markdown的工具好用到不行配合下面的ipic图床直接爽翻天~怪怪所有的文章都是在这个上面写滴~Ipic官网地址 ipic.ca上面的 Typora 美中不足的就是图片是本地的地址发到网上就会失效。使用 Ipic 的免费图床就可以解决啦~Ipic 的免费图床是新浪滴如果失效的话可以自行配置X里云 OSS很便宜~Markdown 格式美化官网地址www.npmjs.com/package/lin…一个npm包通过命令将 Markdown文件中中英文进行隔开基于 AST 开发且方便集成 ci就很有规范很有格局很好看了~有兴趣的小伙伴还可以去研究一下源码~抓包系列Charles官网地址www.charlesproxy.com/抓包必备神器实际上就是个代理服务器跟后端联调有问题先抓包看看准没错~Mock 接口数据也可以用这个工具map local 到本地自己写的 json 文件即可wireshark官网地址www.wireshark.org/也是用来抓包滴不过抓的是网络层的~偶尔做一些网络层优化的时候这个工具就可以派上用场啦哈~UI 系列ProcessOn官网地址www.processon.com/怪怪所有文章里面画图都是用这个神器各种原型图思维导图网络拓扑图都支持日常开发先画个图理一下思路还是很有必要滴~下面是怪怪之前写 Node.js 秒杀系统画的图~Sketch官网地址www.sketch.com/get/一般企业产品级的东西都是用 sketch 设计啦~~这个工具做出来的ppt那也是一绝再也不用为ppt烦恼了~~Zeplin官网地址zeplin.io/一些日常的H5活动用这个工具或者下面要说的 Adobe Photoshop CC 2019Adobe Photoshop CC 2019官网地址 www.adobe.com/cn/products…Ps嘛大家都知道的没事帮妹子P下图搞不好能找个女朋友啥滴~~开发系列Devdocs官网地址devdocs.io开发技术文档直接在线快速搜索哦十分方便~各种技术文档都很齐全CodeLF官网地址 unbug.github.io/codelfGItHub的一个爬虫工具估计不少小伙伴开发时都会苦恼给方法取名字这个网站直接给你一步到位多种选择。再也不怕写代码的时候取方法名啦~SwitchHosts官方地址github.com/oldj/Switch…前端开发中总是要不断切换各种环境线下预发线上那这个小工具就是为你量身定做滴~~SwitchHosts 其实也不是很完美真正企业里面我觉得应该有一套统一的host切换工具什么线下环境啊预发环境啊都统一在远端进行配置。怪怪正在开发中后面会开源出来极简二维码地址chrome 扩展商店中搜索【极简二维码】添加到 chrome 插件开发H5页面的时候总是需要在移动端访问在pc端开发的页面这个小工具直接生成当前网页的二维码扫一扫就很快乐~~比如下面的蘑菇街主页。Visual Studio Code官网地址code.visualstudio.comVisual Studio Code是一个轻量且强大的跨平台开源代码编辑器IDE支持WindowsOS X和Linux。内置JavaScript、TypeScript和Node.js支持而且拥有丰富的插件生态系统可通过安装插件来支持C、C#、Python、PHP等其他语言。占据了前端大部分的市场~ 写代码的不二之选~~WebStorm官网地址www.jetbrains.com/webstorm/虽然 Visual Studio Code 很强大但怪怪还是喜欢用 WebStormWs 会有点耗内存如果是windows用户就直接选择 Vs 了。下面的项目是最近会发的文章源码哦~~n官网地址www.npmjs.com/package/n切换 node 版本的一个 npm 包轻量好用你要想用nvm也行这个没啥大影响哈~听朋友说蚂蚁金服内部有自己的一套切换的工具不用nvm也不用nLighthouse官网地址developers.google.com/web/tools/l…自动化页面性能分析工具会给你分析出当前页面哪些是需要优化的地方并且提供优化方案~ 很实用我们来给 apple 官网跑个分好像好不错~移动端调试官网地址developers.google.com/web/tools/c…网上也有很多各种移动端调试的工具不过怪怪还是想推荐一下这种方式哦方便及时响应~FeHelper官方地址github.com/zxlie/FeHel…一款 chrome 插件集合了一些日常会用的功能集合很棒~什么正则啊时间戳转换啊这一系列开发时会用到的几乎都有~~Intellij IDEA官网地址 www.jetbrains.com/idea前端偶尔遇到需要自己写写 Java 的情况那就用这个工具准没错巨强大~Navicat Premium官网地址 www.navicat.com.cn在用 Node.js 做一些小项目需要用到数据库的时候这个数据库的可视化工具用起来就是真滴很香~~Postman官网地址 www.getpostman.com接口调试神器后端大佬们接口还没写好的时候这个工具用来给前端小伙伴mock一下api还是蛮不错的哦~不过很多公司都有自研的数据mock平台啦~总结本文已收录 Github https://github.com/ponkans/F2E欢迎 Star持续更新上面分享的这些工具都是怪怪工作中经常用并且觉得还不错的工具。分享给大家希望能给大家带来一些工作效率上的提升~~近期在写 Node.js 的系列传送门《大前端进阶 Node.js》系列 必知、必会、必问《大前端进阶 Node.js》系列 双十一秒杀系统进阶必看《大前端进阶 Node.js》系列 多进程底层原理字节跳动被问前言在大厂前端开发的日常中“工具链”的熟练度直接决定了开发效率和问题排查能力。无论是定位一个棘手的线上Bug、模拟复杂的后端接口数据还是优化首屏加载性能合适的工具往往能起到事半功倍的效果。本文将从网络抓包、代码调试、Mock数据、接口管理、性能分析、版本控制、IDE 提效、自动化构建八大维度为你盘点大厂前端工程师真正高频使用的必备工具并附上实战技巧与配置建议。一、 网络抓包与代理工具在前后端分离的开发模式下抓包工具是定位接口问题、查看网络请求细节、模拟弱网环境、甚至修改请求与响应的利器。1. Whistle关键词跨平台、功能强大、基于Node、规则配置灵活Whistle 是目前大厂前端使用最广泛的抓包代理工具之一基于 Node.js 实现支持 HTTP/HTTPS/WebSocket 等协议的抓包与修改。核心特性代理与抓包一体化启动后自动设置系统代理捕获所有网络请求。规则配置通过类似于 Hosts 的规则文件实现请求转发、替换、注入、Mock 等。移动端调试手机设置代理后可捕获移动端 H5 页面的网络请求。HTTPS 支持一键安装根证书支持 HTTPS 请求的解密与查看。插件生态支持通过插件扩展功能如 Mock 数据、接口自动化测试等。常用场景本地开发代理将线上域名指向本地127.0.0.1实现本地调试线上页面。接口 Mock直接拦截特定接口返回预设的 JSON 数据。替换资源将远程 JS/CSS 替换为本地文件方便调试样式与逻辑。模拟弱网设置延迟规则模拟 2G/3G/4G 网络环境。实战配置示例bash# 安装 whistle npm install -g whistle # 启动 whistle w2 start # 打开管理界面 http://127.0.0.1:8899常用规则在 Rules 中配置text# 将 api.example.com 指向本地 mock 服务 api.example.com 127.0.0.1:3000 # Mock 一个接口返回 https://api.example.com/user/info resBody://{name: whistle, age: 18} # 替换线上 JS 文件为本地文件 https://cdn.example.com/main.js file:///Users/xxx/local/main.js # 模拟网络延迟 2 秒 www.example.com delay://2000高级技巧Values 功能将 Mock 数据存储在 Values 中通过resBody://{valueName}引用便于维护多套 Mock 数据。组合规则reqScript可执行自定义脚本实现复杂的请求/响应处理逻辑。多环境切换通过Group分组管理不同环境的规则集一键切换开发/测试/预发环境。2. Charles关键词老牌、图形化界面、流量限制、重放功能Charles 是一款老牌的抓包工具以其强大的图形化界面和稳定性著称尤其适合对命令行不太熟悉的开发者。核心特性SSL 代理支持 HTTPS 抓包需安装根证书。带宽限制内置弱网模拟支持自定义上行/下行速率。断点调试可对请求或响应设置断点手动修改后再放行。重复请求支持对选中的请求进行重复发送便于接口调试。Map Local/Remote将远程请求映射到本地文件或其他地址。适用场景移动端 H5 调试配合手机代理抓取微信/App 内嵌页面的请求。接口分析分析接口耗时、数据包大小、状态码等。线上问题复现通过重放请求验证接口是否异常。注意事项Charles 为付费软件免费版有 30 分钟使用限制和弹窗。在 M1/M2 Mac 上安装需注意兼容性。3. Chrome DevTools Network Panel关键词浏览器内置、零配置、快速定位对于简单的抓包需求Chrome DevTools 的 Network 面板是最快捷的选择。核心功能请求概览查看所有请求的 URL、状态码、协议、耗时、传输大小。请求详情Headers、Payload、Preview、Response、Timing。保留日志勾选Preserve log页面跳转后日志不会清空。模拟网络在Network conditions中模拟 3G/4G 或离线状态。阻断请求通过Block request URL阻断特定请求测试降级逻辑。最佳实践快速过滤使用CtrlF或CmdF在请求列表中搜索关键词。导出 HAR将请求列表导出为 HAR 文件可分享给后端同事或用于性能分析。Waterfall 分析通过瀑布图分析资源加载顺序定位性能瓶颈。二、 代码调试工具调试是前端开发的核心技能除了基础的console.log大厂前端更倾向于使用更高效、更强大的调试工具。1. Chrome DevTools (Sources Panel)关键词断点调试、Source Map、Watch、Call StackChrome DevTools 的 Sources 面板是前端调试的核心阵地。核心功能断点调试代码行断点点击行号设置程序执行到该行暂停。条件断点右键行号设置表达式满足条件时才暂停。DOM 断点元素面板中对 DOM 节点设置子节点修改、属性变化等断点。XHR/Fetch 断点在 Sources 面板的 XHR/fetch Breakpoints 中输入 URL 关键词拦截请求。Source Map生产环境代码通常经过压缩混淆通过 Source Map 可在浏览器中直接调试原始源码。Watch监视表达式变化实时查看变量值。Call Stack查看函数调用栈定位代码执行路径。Scope查看当前作用域内的所有变量。黑盒脚本将第三方库脚本标记为“黑盒”调试时自动跳过只关注业务代码。高级技巧Logpoint在不打断程序执行的情况下在控制台输出日志。右键行号选择“Add logpoint”。Live Expression在 Sources 面板上方点击“眼睛”图标输入表达式实时查看其值变化。Overrides在 Sources 面板的 Overrides 标签中可以保存对线上资源的修改到本地实现持久化调试。2. React DevTools / Vue DevTools关键词组件树、Props/State、性能分析对于使用主流框架的项目框架专属的 DevTools 是必备的。React DevTools组件树查看组件层级、组件名称。Props State实时查看和修改组件的 props 和 state。Hooks查看 Hooks 的值包括useState、useEffect、自定义 Hook 等。性能分析Profiler 面板记录组件渲染时间、渲染次数帮助定位性能瓶颈。高亮更新在设置中开启“Highlight updates when components render.”页面中发生重绘的组件会被高亮显示。Vue DevTools组件树支持 Vue 2/3展示组件层级和组件名称。数据查看查看和动态修改 data、props、computed、vuex/pinia 状态。时间旅行对于 Vuex/Pinia支持状态回溯。性能分析记录组件渲染性能。路由跟踪查看当前路由信息及路由历史。3. 移动端调试工具移动端 H5 调试是前端的难点以下工具可有效降低调试成本。vConsole腾讯出品的轻量级移动端调试面板只需引入一个 JS 文件即可在手机页面上看到 Console、Network、Element、Storage 等面板。htmlscript srchttps://cdn.jsdelivr.net/npm/vconsole/script script var vConsole new VConsole(); /scripteruda功能类似 vConsole界面更美观插件丰富如支持显示性能数据、捕获页面截图等。Chrome Remote Devices通过 USB 连接 Android 手机在 Chrome 的chrome://inspect中可以像调试 PC 页面一样调试手机 Chrome 或 WebView 中的页面。Safari Web InspectoriOS 设备通过 USB 连接 Mac在 Mac Safari 的“开发”菜单中可以调试 iPhone 上的 Safari 或 WKWebView。4. VS Code Debugger直接在 IDE 中打断点调试前端代码无需切换到浏览器 DevTools。配置示例Launch Chrome在.vscode/launch.json中配置json{ version: 0.2.0, configurations: [ { type: chrome, request: launch, name: Launch Chrome against localhost, url: http://localhost:3000, webRoot: ${workspaceFolder}/src, sourceMapPathOverrides: { webpack:///src/*: ${webRoot}/* } } ] }设置断点后按 F5 启动调试VS Code 会打开 Chrome 并自动关联断点。三、 Mock 数据方案在前端开发中后端接口往往滞后或某些异常场景难以触发Mock 数据能力决定了前端能否独立高效地推进开发。1. Mock.js关键词随机数据、语法简洁、拦截 AjaxMock.js 是最早流行的 Mock 库通过重写XMLHttpRequest和fetch拦截请求并返回随机生成的数据。核心语法javascriptimport Mock from mockjs; Mock.mock(/api/user, get, { code: 200, data: { name: cname, // 随机中文名 age|18-60: 1, // 年龄 18-60 之间 email: email, // 随机邮箱 avatar: image(200x200), address: city(true) } });优点语法简单学习成本低。支持生成丰富的随机数据图片、姓名、日期等。与框架无关可独立运行。缺点拦截的是 XHR 和 fetch无法 mock 原生 XMLHttpRequest 之外的方式如 WebSocket。数据随机无法保持状态一致性。2. YApi关键词接口管理平台、可视化、Mock 优先YApi 是去哪儿网开源的可视化接口管理平台目前在大厂内部广泛使用。它集成了接口文档管理、Mock 服务、自动化测试等功能。核心特性可视化接口定义通过 Web 界面定义接口的请求参数和响应结构。自动 Mock根据定义的 JSON Schema自动生成 Mock 数据。高级 Mock支持 Mock.js 语法可编写自定义 Mock 脚本。Swagger 导入支持导入 Swagger/OpenAPI 规范一键生成接口。权限管理支持项目分组、成员权限控制。自动化测试内置测试集可对接口进行回归测试。使用流程部署或使用公共 YApi 服务也可使用本地 Docker 启动。创建项目定义接口路径、方法、请求参数、响应结构。前端通过 YApi 提供的 Mock 地址如http://yapi.com/mock/{projectId}/api/user发起请求。后端开发完成后将 Mock 地址切换为真实地址。优势前后端协作桥梁接口定义统一在平台管理避免文档与代码脱节。Mock 与真实切换方便只需改变 baseURL无需修改业务代码。3. 本地 Mock 服务Express/Koa Whistle对于复杂场景可自建本地 Mock 服务结合 Whistle 代理实现更灵活的 Mock 能力。示例Express Mock Serverjavascriptconst express require(express); const app express(); app.get(/api/user, (req, res) { res.json({ code: 200, data: { name: Mock User, role: admin } }); }); app.post(/api/login, (req, res) { const { username, password } req.body; if (username admin password 123456) { res.json({ code: 200, token: fake-jwt-token }); } else { res.status(401).json({ code: 401, message: 用户名或密码错误 }); } }); app.listen(3000, () { console.log(Mock server running at http://localhost:3000); });然后通过 Whistle 将接口代理到本地 Mock 服务。4. 前端代码内 Mock适配器模式在代码层面封装请求层通过环境变量切换数据源。javascript// request.js const isMock process.env.NODE_ENV development process.env.USE_MOCK true; if (isMock) { // 引入 mock 数据 export default function request(url, options) { return import(./mock/${url}.js).then(module module.default); } } else { // 真实请求 export default function request(url, options) { return fetch(url, options).then(res res.json()); } }这种方式适用于简单项目且 Mock 数据与业务代码分离但需注意维护成本。四、 接口管理与文档工具除了 Mock接口的规范管理和文档沉淀也是大厂工程化的关键一环。1. Swagger (OpenAPI)关键词规范、自动生成文档、前后端统一Swagger 是一套围绕 OpenAPI 规范的工具集后端通过注解或配置生成接口文档前端可直接查看并在线调试。优势文档即代码接口变更自动同步到文档避免文档过期。在线调试可直接在 Swagger UI 上发起请求验证接口。代码生成可根据 OpenAPI 文件自动生成前端 API 调用代码如通过swagger-typescript-api。实践建议推动后端使用 Swagger 规范输出接口文档。前端可将 OpenAPI JSON 文件导入到 YApi 或 Apifox 中进行二次管理。2. Apifox关键词一体化协作平台、API 设计、调试、Mock、文档Apifox 是近年来崛起的 API 协作平台定位是“Postman Swagger Mock JMeter”的集合体。核心功能接口设计可视化的接口定义支持 OpenAPI 3.0 规范。接口调试内置请求发送功能类似于 Postman。自动 Mock根据定义的数据模型自动生成 Mock 数据。文档生成自动生成可交互的 API 文档。自动化测试支持编写测试用例集成到 CI/CD。团队协作支持云端同步、成员权限管理。适用场景前后端分离团队需要统一的接口管理工具。希望在一个平台上完成从设计、调试、Mock 到测试的全流程。3. Postman虽然 Postman 更偏向接口调试但其强大的集合管理和环境变量功能使其也成为前端常用的工具之一。常用功能集合Collection将相关接口分组管理便于维护。环境变量切换开发/测试/生产环境。预请求脚本 测试脚本在请求前设置动态参数在请求后编写断言进行自动化测试。Runner批量运行集合中的请求用于回归测试。生成代码可将请求转换为 curl、JavaScript、Python 等多种语言的代码片段。五、 性能分析与监控工具前端性能直接影响用户体验和转化率大厂对性能的追求近乎苛刻。1. Lighthouse关键词自动化、评分、优化建议Lighthouse 是 Google 出品的开源自动化工具用于改进网页质量。可从性能、可访问性、最佳实践、SEO、PWA 五个维度对网页进行评分并给出优化建议。使用方式Chrome DevToolsLighthouse 面板点击“Generate report”。Node CLIlighthouse https://example.com --viewCI 集成可将 Lighthouse 集成到 CI 流程中防止性能回归。核心指标Core Web VitalsLCP (Largest Contentful Paint)最大内容绘制时间衡量加载性能理想值 2.5s。INP (Interaction to Next Paint)交互响应时间衡量交互流畅度理想值 200ms。CLS (Cumulative Layout Shift)累计布局偏移衡量视觉稳定性理想值 0.1。2. WebPageTest关键词多地点、多浏览器、详细瀑布图WebPageTest 是一款在线性能测试工具支持从全球多个地点、不同设备/浏览器上测试网页性能。核心价值首屏视频可回放页面加载过程的视频直观感受加载体验。详细瀑布图每个请求的 DNS、TCP、SSL、请求发送、等待、下载各阶段耗时。比较测试可同时对比两个页面的性能差异。自定义脚本支持登录、点击等用户交互脚本。3. Performance API在代码层面可以使用浏览器 Performance API 精确测量关键节点。javascript// 标记时间点 performance.mark(start-fetch); await fetch(/api/data); performance.mark(end-fetch); performance.measure(fetch-duration, start-fetch, end-fetch); const measure performance.getEntriesByName(fetch-duration)[0]; console.log(请求耗时: ${measure.duration}ms); // 清除标记 performance.clearMarks(); performance.clearMeasures();4. Sentry关键词错误监控、性能监控、线上问题定位Sentry 是一款开源的错误监控平台可实时捕获前端异常并上报到后台帮助开发者在用户反馈前发现问题。核心功能错误捕获自动捕获 JS 异常、Promise 拒绝、资源加载失败等。Source Map 解析上传 Source Map 后可还原错误堆栈到原始源码位置。性能监控记录页面加载、API 请求、自定义事务的耗时。用户反馈用户可提交反馈关联到具体错误。告警配置错误阈值通过邮件、钉钉、飞书等渠道告警。接入示例javascriptimport * as Sentry from sentry/react; import { BrowserTracing } from sentry/tracing; Sentry.init({ dsn: YOUR_DSN, integrations: [new BrowserTracing()], tracesSampleRate: 1.0, // 生产环境建议调低 environment: process.env.NODE_ENV, release: my-project-name1.0.0 });六、 版本控制与协作工具1. Git无可争议的版本控制标准。除了基本的add/commit/push大厂前端更注重 Git 工作流的规范。常用高级操作交互式 rebasegit rebase -i HEAD~3合并 commit、修改 commit message。cherry-pickgit cherry-pick commit-hash将特定提交应用到当前分支。bisectgit bisect start二分查找引入 bug 的提交。refloggit reflog找回丢失的 commit。Git 规范分支命名feature/xxx、bugfix/xxx、hotfix/xxx。commit message 规范使用 Conventional Commits如feat: 添加登录功能、fix: 修复白屏问题、docs: 更新 README。pre-commit 钩子通过 husky lint-staged 在提交前进行代码检查、格式化。2. GitLab / GitHub代码托管平台不仅是存储代码的地方更是协作的中心。核心功能Merge Request / Pull Request代码审查、CI 状态检查、合并前讨论。Issue任务分配、Bug 跟踪。CI/CD通过 GitLab CI 或 GitHub Actions 自动化构建、测试、部署。Wiki项目文档沉淀。七、 IDE 与编辑器提效工具大厂前端普遍使用 VS Code并搭配丰富的插件形成自己的开发“武功”。1. VS Code 必备插件ESLint实时检查代码规范高亮不符合规则的代码。Prettier代码格式化保存时自动格式化统一团队代码风格。GitLens增强 Git 功能查看每行代码的提交信息、作者、时间。Thunder Client轻量级 API 测试插件替代 Postman。Turbo Console Log快速插入console.log并自动命名。Better Comments高亮 TODO、FIXME 等注释。Import Cost显示导入包的大小避免引入过大的依赖。Code Runner运行代码片段快速验证小逻辑。2. 代码片段Snippets自定义常用代码片段提高开发效率。例如在javascript.json中配置一个 React 函数组件的 snippetjson{ React Functional Component: { prefix: rfc, body: [ import React from react;, , interface ${1:ComponentName}Props {, $2, }, , const ${1:ComponentName}: React.FC${1:ComponentName}Props ($3) {, return (, div, $4, /div, );, };, , export default ${1:ComponentName}; ], description: Create a React functional component with TypeScript } }3. 命令行工具iTerm2 Oh My ZshMac 下最强大的终端组合配合主题和插件如git、z、autosuggestions提升命令行操作效率。npm scripts将常用命令封装在package.json的 scripts 中如dev、build、test、lint。npx直接运行 npm 包命令无需全局安装如npx create-react-app my-app。八、 自动化构建与持续集成前端工程化离不开自动化构建和 CI/CD 流程。1. 构建工具Webpack最主流的模块打包器配置灵活生态丰富。Vite基于 ESBuild 的极速开发服务器冷启动和热更新速度远超 Webpack已在 Vue 3、React 等项目中广泛应用。esbuildGo 语言编写速度极快常被用作底层打包器。Rollup专注于库打包输出代码更纯净Vue/React 等库均使用 Rollup 构建。2. CI/CD 工具GitHub Actions与 GitHub 仓库深度集成通过 YAML 文件定义工作流。GitLab CI与 GitLab 集成.gitlab-ci.yml定义流水线。Jenkins老牌 CI 工具插件丰富适合复杂流水线。典型 CI 流程代码提交- 触发流水线。安装依赖npm ci使用package-lock.json保证一致性。代码检查npm run lint。单元测试npm run test。构建npm run build。部署将构建产物上传到 CDN 或服务器。通知通过飞书/钉钉机器人通知构建结果。3. 代码质量工具ESLintJS/TS 代码规范检查支持自定义规则和插件。Prettier代码格式化与 ESLint 配合使用避免格式争议。StylelintCSS/SCSS/Less 规范检查。Husky lint-staged在 Git commit 前只对暂存区文件进行 lint 和格式化避免全量检查耗时过长。Commitlint检查 commit message 是否符合规范。写在最后前端工具链的发展本质上是为了解决“工程化”和“效率”的问题。从网络抓包到接口 Mock从代码调试到性能监控每一个环节的工具选择都反映了一个团队的工程化成熟度。给初学者的建议不要贪多先精通几个核心工具如 Chrome DevTools、Whistle、Git、ESLint再逐步扩展。给进阶者的建议尝试理解工具背后的原理如代理原理、Source Map 原理、构建工具原理这样才能在遇到工具无法覆盖的问题时自己动手解决问题。给团队的建议建立统一的工具链规范和最佳实践文档减少个人偏好带来的协作成本将工具的威力真正转化为团队的交付效率。
