Ubuntu 下调试 JavaScript 的实用方法
一 Node.js 后端调试
- 使用 –inspect / --inspect-brk 启动应用，配合 Chrome DevTools 或 VS Code 进行断点、单步、观察表达式等调试。
- 快速步骤
- 启动调试会话
- 普通启动：node --inspect app.js
- 首行暂停：node --inspect-brk app.js（更易在入口处设断点）
- 打开 chrome://inspect，在 Remote Target 中点击 inspect 进入 DevTools；也可在 DevTools 的 Sources 面板将项目目录添加为 Workspace，实现源码映射与断点生效。
- 在代码中插入 debugger; 语句，程序会在该处自动中断。
- 使用 VS Code：在“运行与调试”中创建 launch.json，选择 Node.js 环境，常用配置如下：
{
“version”: “0.2.0”,
“configurations”: [
{
“type”: “node”,
“request”: “launch”,
“name”: “Launch Program”,
“program”: “${workspaceFolder}/app.js”
},
{
“type”: “node”,
“request”: “attach”,
“name”: “Attach to Process”,
“port”: 9229
}
]
}
- 常用补充
- 调试已运行进程：先启动 node --inspect，再在 VS Code 选择 Attach to Process 连到 9229 端口。
- 无界面环境可用 Headless Chrome 远程调试：google-chrome --headless --remote-debugging-port=9222，访问 http://127.0.0.1:9222 查看可检查页面。
二 前端浏览器调试
- 直接在本机或服务器上使用 Chrome/Chromium 开发者工具：按下 F12 或右键“检查”打开 DevTools，在 Console 查看报错，在 Sources 设置断点，在 Network 检查请求与响应。
- 服务器或无界面环境：启动 Headless Chrome 并开启远程调试端口（如 9222），通过 http://127.0.0.1:9222 在本地 DevTools 中检查页面；也可在程序中集成 Qt WebEngine 并调用 DevTools 接口进行调试。
三 日志与系统层面的辅助排查
- 应用日志：使用 console.log/error 或日志库（如 winston、pino）输出结构化日志，便于追踪执行流与错误堆栈；实时查看日志可用 tail -f /path/to.log。
- 系统与服务日志：Node.js 作为服务运行时，用 journalctl -u your-service-name -f 跟踪服务日志；同时检查 /var/log/ 或应用目录下的日志文件。
- 运行环境：用 top/htop 观察 CPU/内存，df -h / du -sh 检查 磁盘空间，确认依赖与环境变量配置无误。
四 常见问题与快速排查
- 看不到 Node 进程：确认以 –inspect 启动，端口 9229 未被占用；必要时用 –inspect-brk 确保首行即暂停。
- 断点不生效：在 VS Code 将项目根目录添加为 Workspace，确保 Sources 面板中的文件与磁盘文件建立映射。
- 远程/容器场景：确保调试端口（如 9229）已开放并正确映射；Headless 场景使用 –remote-debugging-port=9222 并在 http://127.0.0.1:9222 检查页面。
- 无界面服务器：优先使用 Headless Chrome 远程调试；若需持续集成，可结合日志采集与错误追踪系统（如 Sentry）完善可观测性。