很多刚入门的同学经常问：前端用什么开发工具？

这个问题其实没有单一答案，因为前端开发分为 写代码、构建、调试、测试、优化 等多个环节，每个阶段都有不同的工具选择。

我结合自己的实际经验，总结了前端开发中常用的工具清单，并给出不同阶段的推荐。

一、写代码：编辑器和 IDE

写代码是前端的第一步，一个顺手的编辑器很重要。

VS Code：轻量、插件生态丰富，几乎是前端开发的标配。

WebStorm：更强大的智能提示、重构功能，适合长期维护的项目；缺点是收费。

Sublime Text：轻快简洁，适合临时改文件，但大型项目已经不太适合。

新人建议直接上手 VS Code，项目多了再考虑 WebStorm。

二、构建工具：让项目能跑起来

现代前端几乎离不开构建工具，它们负责打包、优化和构建开发环境。

Vite：开发体验最好，热更新快，Vue/React 开发利器。

Webpack：生态最成熟，插件最丰富，适合生产环境。

Rollup：适合打包前端库。

Parcel：零配置，上手快，适合小项目。

我的推荐：开发阶段用 Vite，上线打包用 Webpack。

三、调试工具：定位问题的核心

写完代码并不代表结束，调试才是关键。

Chrome DevTools：网页调试首选，断点、性能分析、网络请求全能。

Safari Inspector：iOS 浏览器和 WebView 调试必备。

WebDebugX：如果做 H5 页面或嵌入 App 的 WebView，WebDebugX 特别实用。它能在 Windows/Mac/Linux 下远程调试 iOS 和 Android WebView，查看 DOM、CSS、JS 和网络请求，解决了官方工具跨平台不足的问题。

我的经验：桌面调试用 DevTools，移动端场景必须加上 Safari Inspector + WebDebugX。

四、测试与代码质量工具

要写出可维护的前端项目，测试和规范工具必不可少。

ESLint：保证代码风格一致。

Prettier：自动格式化，让代码更整齐。

Jest：单元测试框架。

Cypress：端到端测试，能模拟完整用户流程。

小项目用 ESLint + Prettier 就够了，大项目再加 Jest 和 Cypress。

五、性能与优化工具

上线前一定要做性能检测。

Lighthouse：检测网页性能、SEO、可访问性。

Webpack Bundle Analyzer：可视化打包结果，优化依赖体积。

Charles / Fiddler：抓包工具，接口调试神器。

我的习惯：上线前跑 Lighthouse，确保性能不过低。

六、不同阶段推荐工具组合

初学阶段：VS Code + Chrome DevTools + ESLint

小项目开发：VS Code/WebStorm + Vite + DevTools + Prettier

团队项目：WebStorm + Vite+Webpack + WebDebugX + Jest + Cypress

上线优化：Lighthouse + Bundle Analyzer + Charles

所以，前端用什么开发工具？

我的答案是：要看你的需求和场景。

入门学习 → VS Code + DevTools

中小项目 → Vite + ESLint + Prettier

企业级项目 → WebStorm + Vite + Webpack + WebDebugX + Jest + Cypress

上线优化 → Lighthouse + Charles

工具没有绝对的好坏，只有最适合的组合。用好工具，能让前端开发从"加班踩坑"变成"高效交付"。