写 JavaScript 的人常常会问：JavaScript 开发工具有哪些？
其实，开发工具的选择和你的项目场景密切相关：
- 写代码 → 需要编辑器；
- 构建项目 → 需要打包工具；
- 调试问题 → 需要调试工具；
- 确保稳定 → 需要测试工具。
下面我结合自己的经验，聊聊常用的 JavaScript 开发工具，并通过不同场景来说明它们的作用。
场景一：编写 JavaScript 代码
- VS Code：轻量、插件多，比如 ESLint、Prettier 插件几乎是必装。
- WebStorm：智能提示、重构和调试体验更好，适合长期项目。
- Sublime Text：轻量，但生态不如 VS Code。
我的选择是：日常写 JS 用 VS Code，大项目才会切 WebStorm。
场景二：构建与打包 JavaScript
现代 JavaScript 基本要通过打包工具才能上线。
- Vite：开发体验最好，热更新超快。
- Webpack：生态成熟，适合复杂项目的生产环境。
- Rollup：适合打包前端库。
- Parcel：零配置，上手快，适合新手小项目。
我的经验：开发阶段用 Vite，上线打包用 Webpack 是最稳的组合。
场景三：调试 JavaScript 代码
写 JS 最常遇到的问题就是 bug。调试工具的选择很关键。
- Chrome DevTools：调试 JS 的首选，可以打断点、看调用栈、监控网络请求。
- Firefox Developer Tools：在调试 CSS 与 JS 联动时体验很好。
- Safari Inspector：调试 iOS Safari 和 WebView 必备。
- WebDebugX：当项目涉及移动端 H5 或 WebView，就必须用到它。WebDebugX 支持在 Windows、Mac、Linux 上远程调试 iOS/Android WebView，可以查看 DOM、CSS、JS 和网络请求。
真实案例：我在一个活动页项目里遇到 iOS WebView 里的事件绑定无效问题，最后是通过 WebDebugX 的调试功能才定位出来的。
场景四：保证 JavaScript 代码质量
- ESLint：静态检查工具，保证代码风格一致。
- Prettier：格式化工具，让 JS 更整齐统一。
- Jest：最常用的单元测试工具。
- Cypress：端到端测试，能模拟完整用户流程。
小项目：ESLint + Prettier；大项目：加 Jest + Cypress。
场景五：优化 JavaScript 项目性能
- Lighthouse：检测性能、SEO、可访问性。
- Webpack Bundle Analyzer：分析打包体积，找出性能瓶颈。
- Charles / Fiddler：抓包工具，调试网络请求。
我的习惯是上线前一定跑 Lighthouse，这能提前发现很多隐藏问题。
我的 JavaScript 开发工具推荐组合
- 写代码 → VS Code / WebStorm + ESLint + Prettier
- 构建 → Vite（开发）+ Webpack（生产）
- 调试 → DevTools + Safari Inspector + WebDebugX（跨端 WebView）
- 测试 → Jest + Cypress
- 优化 → Lighthouse + Bundle Analyzer
这样一整套工具链，能覆盖绝大多数 JS 开发场景。
所以，JavaScript 开发工具有哪些？
我的答案是：要根据场景选择合适的工具。
- 初学者 → VS Code + Chrome DevTools
- 中级开发 → Vite + ESLint + Prettier
- 团队项目 → WebStorm + Webpack + Jest + Cypress
- 跨端项目 → WebDebugX（WebView 调试必备）
- 上线优化 → Lighthouse + Charles
工具链的搭配，决定了你能多快、多稳地完成项目。
随时随地看视频
