如何使用Debian进行JS调试

在 Debian 上进行 JavaScript 调试的实用指南

一环境准备

安装 Node.js 与 npm（用于运行与调试后端/脚本 JS）：
- 执行：sudo apt update && sudo apt install nodejs npm
安装 VS Code（可选，图形化断点调试体验更好）：
- 从官网下载 .deb 包后执行：sudo apt install ./<file>.deb
浏览器用于前端调试：
- 安装 Chrome/Chromium（下文以 Chrome 为例）。

二调试 Node.js 后端

使用 –inspect / --inspect-brk 启动并连接 Chrome DevTools：
- 常规启动：node --inspect app.js
- 首行暂停：node --inspect-brk app.js
- 指定端口：node --inspect=8888 app.js（默认端口 9229）
- 在 Chrome 打开：chrome://inspect → 点击 Open dedicated DevTools for Node → 选择目标进行断点、单步、观察表达式。

使用 VS Code 一键调试：

在项目根目录创建 .vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch App",
      "program": "${workspaceFolder}/app.js",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

F5 启动，断点即刻生效。

使用 nodemon 热重载开发：
- 启动：nodemon --inspect app.js（代码变更自动重启并保持调试会话）。
使用 debug 模块输出结构化调试信息：
- 安装：npm install debug
- 代码：
```
const debug = require('debug')('myapp');
debug('启动完成，端口=%d', 3000);
```
- 运行：DEBUG=myapp node app.js（可用命名空间如 myapp:* 控制输出）。

三调试前端浏览器 JS

本地或远程服务器场景：
- 在 Debian 上启动前端服务（如 npm run dev 或静态服务器），确保可通过 http://<服务器IP>:<端口> 访问。
- 在客户端浏览器按 F12 打开 开发者工具：
  - Console：查看报错与 console.log 输出。
  - Sources/Debugger：设置断点、单步执行、观察作用域与调用栈。
  - Network：排查请求失败、慢请求、CORS 等网络问题。
无头/远程浏览器场景（如服务器渲染、自动化）：
- 启动 Chrome DevTools Protocol 调试端口：
```
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile
```
- 获取可调试页面目标：
```
curl http://localhost:9222/json/list
```
- 使用 CDP 客户端连接目标 WebSocket URL 并执行命令（如 Page.navigate、Runtime.evaluate）进行自动化调试与分析。

四日志与错误定位

前端定位：
- 优先看 Console 报错与堆栈；用 Network 复现并检查状态码、响应与请求头/负载。
后端与服务器日志：
- 查看 Node.js 应用日志（自定义路径或 console 输出重定向）。
- Web 服务器日志：
  - Nginx：/var/log/nginx/error.log
  - Apache：/var/log/apache2/error.log
  - 系统日志：/var/log/syslog
- 实时跟踪：tail -f /var/log/nginx/error.log
常见错误类型速查：
- SyntaxError（语法错误）、ReferenceError（未定义变量）、TypeError（类型不匹配）、RangeError（数值越界）。
辅助手段：
- 使用 grep/awk/sed 快速检索关键字（如 ERROR、Exception）。
- 接入 ELK Stack（Elasticsearch/Logstash/Kibana）做大规模日志分析与可视化。

五常见问题与排查

无法在 chrome://inspect 看到 Node 目标：
- 确认进程以 –inspect 启动且未退出；如使用远程/容器，确保端口 9229 可访问（必要时做端口转发）。
- 更换端口重试：node --inspect=8888 app.js，再在 DevTools 中连接到 localhost:8888。
VS Code 断点不生效：
- 检查 launch.json 的 program 路径是否正确；确保未使用已打包/编译后的代码路径。
- 如使用框架（如 Next.js），使用项目提供的调试脚本或配置 skipFiles 忽略 node_internals。
服务器上前端页面空白或资源 404：
- 检查服务是否监听 0.0.0.0 而非 127.0.0.1；确认静态资源路径与反向代理配置正确。
无头 Chrome 调试端口被占用：
- 结束占用进程或更换端口：lsof -i:9222 → kill <PID>；重启 Chrome 时更换端口。

最新问答

相关标签