web前端用什么软件：按项目选型

web前端用什么软件，基础组合为代码编辑器+浏览器调试工具+辅助设计软件，新手优先选VSCode搭配Chrome，MDNWebDocs官方学习教程也推荐这套组合；Windows低配电脑可选用Notepad++，企业大型JS项目可选用WebStorm，SublimeText适合追求启动速度的开发者；适用边界是，纯可视化拖拽建站不属于前端代码开发，不适合学习HTML、CSS、JS底层逻辑，仅适合快速搭建展示页面。

web前端代码编辑器选择

VSCode是微软出品免费开源跨平台编辑器，内置Git、终端、调试模块，插件市场可安装LiveServer、Prettier、ESLint，LiveServer可保存代码后自动刷新浏览器页面，Prettier自动格式化代码，ESLint捕获语法错误，Windows、Mac、Linux系统都能正常运行，学习Vue、React、原生前端都适配。内存占用会随插件数量上升，老旧电脑一次性安装大量插件会出现卡顿。

WebStorm属于付费IDE，内置全套前端检测、重构、类型校验能力，无需额外安装大量插件，适合多人协作大型项目，对TypeScript、复杂组件项目支持较好。软件授权需要持续付费，启动速度慢，简单静态页面开发时工具能力冗余。

Notepad++仅支持Windows，轻量免费，打开速度快，适合初学阶段写少量HTML、CSS代码，没有复杂插件生态，不适合框架类项目开发。SublimeText启动极快，内存占用低，可无限期试用，偶尔弹出购买提示，插件数量少于VSCode，适合写简单页面或者配置极简开发环境。

web前端调试浏览器软件

Chrome浏览器自带开发者工具，是前端主流调试软件，右键页面选择检查，可查看DOM结构、修改CSS样式、监控网络请求、模拟手机设备，排查页面样式错乱、接口报错问题。Firefox开发者工具对CSS调试细节优化较好，Safari开发工具专门用于调试苹果设备独有的页面兼容问题，多浏览器测试能降低页面兼容性缺陷。

必装调试操作。

打开浏览器开发者工具，切换设备模拟面板，核对移动端页面布局；切换Network面板，查看接口返回数据与加载耗时；在Console面板，直接运行JS代码，快速验证小段逻辑。移动端页面开发，必须使用至少两种浏览器完成兼容性测试，仅使用单一浏览器开发，上线后容易出现样式错位。

web前端辅助设计软件

UI稿交付阶段，前端需要查看设计图，Figma网页版免费额度足够日常使用，可直接获取元素尺寸、色值、字体参数，支持复制CSS代码。Photoshop用于解析老项目PSD设计稿，现在新项目大多改用Figma，减少文件传输成本。切图工具可导出图片素材，自动压缩图片体积，降低网页图片加载时长。

不要用Dreamweaver可视化拖拽功能写生产代码，拖拽自动生成的代码冗余严重，后期维护修改成本很高，仅适合几十年前简单静态页面，当前行业项目很少使用。

优先配齐VSCode+Chrome，其余工具按需添加。