浏览器开发者工具：前端调试的得力助手
写网页的时候，最常打交道的就是浏览器自带的开发者工具。按一下 F12，元素、网络请求、JavaScript 控制台全都能看到。比如页面上的按钮点不动，打开 Console 一看，原来是少了个括号报错了。又比如图片加载特别慢，点开 Network 标签，发现是某个 CDN 资源 404 了，换一个链接立马恢复正常。
平时改样式也靠它，直接在 Elements 面板里修改 CSS，实时预览效果，调好了再把代码抄回编辑器，省得反复保存刷新。
Postman：接口调试不再靠猜
前后端联调时，后端同事说接口没问题，前端却拿不到数据？这时候用 Postman 自己发个请求试试就知道了。填好 URL、选择 GET 或 POST，带上参数和请求头，点一下 Send，立刻看到返回结果。
比如登录接口返回 401，查了一下才发现 Authorization 头没加，或者 token 过期了。还能把常用请求存成集合，团队共享，避免每人各写一套测试方式。
VS Code 内置调试器：断点跟踪真方便
写 Node.js 服务或者 TypeScript 项目时，VS Code 的调试功能特别实用。在代码行号边点一下设个断点，然后启动调试模式，程序运行到那里就会暂停。
你可以看当前变量的值、调用栈，一步步往下走。比如处理用户上传文件的逻辑出错，断下来一看，原来 path.join 拼接路径时漏了个斜杠，导致文件找不到。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/app.js"
}
]
}Chrome DevTools 调试 Node.js
不只是浏览器代码能调试，Node.js 也能用 Chrome 来查问题。启动服务时加上 --inspect 参数：
node --inspect app.js然后在 Chrome 地址栏输入 chrome://inspect，点击出现在列表里的文件，就能像调试前端一样打断点、查看堆栈，对不熟悉命令行调试的人来说更友好。
日志工具：别小看 console.log
虽然听起来土，但打印日志永远是最直接的手段。尤其是在生产环境不能随便打断点的情况下，log 出关键变量的状态，能快速定位问题。
比如定时任务没执行，加几行 log 发现是 cron 表达式写错了，本该每天跑一次，结果写成了每小时跑一次还漏了分钟位。当然，正式项目建议用 winston 或 log4js 这类带级别和输出格式的日志库，方便过滤和归档。
Wireshark 和 Fiddler：抓包看真相
当系统之间通信出问题，比如调第三方支付一直失败，又没有明确错误信息，就得上抓包工具了。Fiddler 对 HTTP/HTTPS 请求特别友好，能清楚看到请求头、响应码、返回体。
有次遇到 HTTPS 请求被拒绝，抓包发现是 TLS 版本太低，对方服务器只支持 1.2 以上，而老系统默认用的是 1.0。升级协议后问题解决。Wireshark 更底层，适合查 TCP 连接超时、丢包这类网络层问题。
Lint 工具提前发现问题
ESLint、Prettier 这些工具不只是统一代码风格，还能在写代码的时候就标出潜在错误。比如用了未定义的变量，或者写了永远不会执行的 else 分支，ESLint 会直接画红线提醒。
有个同事曾经把 if (user = null) 写成了赋值，结果所有用户都被判空，ESLint 立刻警告这是可能的逻辑错误，及时改了过来。