开发常用的调试工具 日常维护方法与实用案例

开发常用的调试工具

写代码难免出问题，这时候就得靠调试工具来“抓虫”。不管是前端页面错位，还是后端接口返回异常，合适的工具能让排查效率翻倍。下面这些是日常开发中用得最频繁的几款。

浏览器开发者工具

前端开发离不开浏览器自带的 DevTools。按 F12 就能打开，元素面板看 DOM 结构和样式，网络面板查请求是否发出、状态码对不对，控制台输出日志和报错一目了然。比如你点按钮没反应，去 Sources 打个断点，一步步看逻辑走到哪卡住了，比 console.log 多了还快。

Postman

调接口时，很多人第一反应就是 Postman。它能模拟各种 HTTP 请求，带 headers、传 body、加 token 都很方便。比如新写了个登录接口，先用 Postman 试试参数传过去能不能返回正确数据，不用等前端联调就能验证逻辑。现在也有类似的替代品，像 Insomnia 或者 VS Code 插件 REST Client，看个人习惯。

VS Code 内置调试器

写 Node.js 项目时，直接在 VS Code 里打断点更省事。配合 launch.json 配置启动项，运行起来后变量值、调用栈都清清楚楚。比如处理文件上传时发现某个字段丢了，可以直接停在解析那一步，看看 req.file 到底有没有拿到。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

Chrome 的 Node.js 调试支持

如果不想用 IDE，也可以用命令行启动 Node 服务加上 --inspect 参数。然后在 Chrome 地址栏输入 chrome://inspect，连上之后就能用熟悉的 DevTools 界面调试服务器代码。适合想快速看一下异步流程有没有跑偏的情况。

React Developer Tools 和 Vue Devtools

用 React 或 Vue 的人肯定装过这两个浏览器插件。它们能直接查看组件树、当前 props 和 state 变化。比如页面没更新，打开 React Devtools 看看是不是 state 没变，或者父组件没往下传新值，比一层层打印更容易定位。

日志工具：Winston 和 Bunyan

线上环境不能随便打断点，这时候就得靠日志。Winston 是 Node 里常用的一个，可以按级别记录 info、warn、error，还能输出到文件或发送到监控系统。比如用户反馈下单失败，翻一下 error 日志，可能立刻就看到数据库连接超时的问题。

调试不是非要高大上工具，关键是顺手、能快速定位问题。很多人一开始只用 console.log，也能解决问题，但随着项目复杂，善用工具才能少熬夜。