前端软件大全（分开发工具、运行调试、设计、框架辅助）
前端软件大全（分开发工具、运行调试、设计、框架辅助）
一、核心代码编辑器（写前端代码必备）
1. VS Code（最主流，免费）
- 支持 HTML/CSS/JS/Vue/React/TS 全语言
- 海量前端插件：ESLint、Prettier、Vue、React、Live Server、Auto Rename Tag
- 内置终端、格式化、代码提示、断点调试
- 跨平台：Windows / Mac / Linux
2. WebStorm（JetBrains，付费，专业前端IDE）
- 开箱即用，自带语法校验、重构、自动导入
- 对Vue、React、TS、Node、小程序支持极强
- 适合大型项目团队开发
3. Sublime Text（轻量极速）
- 启动快、占用内存低，适合简单页面快速编写
- 插件生态完善，无内置调试功能
4. HBuilderX（国产，uniapp/小程序首选）
- 原生支持 uni-app、微信/支付宝小程序、App打包
- 自带模拟器、云端打包、中文友好
二、浏览器调试工具（运行、测试前端页面）
- Chrome 谷歌浏览器
DevTools 前端标准调试工具：元素面板改样式、Console打印日志、Network看接口、Sources断点调试、Performance性能分析
- Edge（同Chrome内核，工具一致）
- Firefox（火狐）：独立调试引擎，兼容性测试专用
- Safari：Mac/iOS 真机调试，测试苹果端兼容
三、UI/设计软件（前端切图、还原页面）
- Figma（在线协作首选，免费够用）
网页端设计，一键导出CSS/图片/切图，团队共用设计稿，前端必备
- Sketch（Mac专属）：传统UI设计工具，多用于APP、网页设计
- Adobe XD：Adobe出品，设计+简单原型
- Photoshop / Illustrator：老式切图、图片处理
四、本地服务 & 构建工具（命令行软件）
环境必备
- Node.js：前端工程化核心，提供npm/yarn/pnpm包管理器，运行Vue/React项目
- Git + Git Bash：代码版本管理，配合Github/Gitee仓库
本地运行工具
- Live Server（VSCode插件）：静态HTML本地热刷新
- Vite / Webpack：项目构建工具（配合Node使用）
- Nginx：本地部署静态页面、跨域代理
五、接口 & 调试辅助软件
- Postman / Apifox：测试后端接口，模拟请求参数
- Charles / Fiddler：抓包工具，拦截修改接口数据、解决跨域
- SwitchHosts：修改本地host，切换测试/线上环境域名
六、移动端真机调试软件
- 微信开发者工具：微信小程序、小游戏开发
- 抖音/支付宝/百度小程序官方开发者工具
- HBuilderX模拟器、Chrome远程调试手机页面
七、前端框架配套工具
- Vue：Vue Devtools（浏览器插件）调试Vue组件状态
- React：React Devtools 调试React组件、Hook
- Redux DevTools：状态管理调试
八、简单区分：前端软件分两类
- 开发软件：VSCode、HBuilderX、WebStorm（写代码）
- 运行/辅助软件：Chrome、Node、Git、Apifox、Figma