在 Debian 下调试 JavaScript 的高效方法
一 环境准备
- 安装运行时与包管理：在 Debian 上执行以下命令安装 Node.js 与 npm（建议优先使用 Node.js 14+ 以获得更好的调试体验）。
- sudo apt update
- sudo apt install nodejs npm
- 验证安装：
- 说明：本文方法适用于 Node.js 后端 与 前端浏览器 两类场景；Node 端以 –inspect/–inspect-brk 配合 Chrome DevTools 为主，前端直接使用浏览器开发者工具。
二 Node.js 调试
- 方式一 使用 Chrome DevTools 调试
- 启动应用：
- 普通启动：node --inspect app.js
- 首行暂停：node --inspect-brk app.js
- 打开 Chrome，访问 chrome://inspect，在 Remote Target 中点击 inspect 打开 DevTools，设置断点、查看调用栈与变量。
- 方式二 使用 VS Code 调试
- 在项目根目录创建 .vscode/launch.json：
- {
- “version”: “0.2.0”,
- “configurations”: [
- {
- “type”: “node”,
- “request”: “launch”,
- “name”: “Launch Program”,
- “program”: “${workspaceFolder}/app.js”
- }
- ]
- }
- 在 VS Code 调试面板选择 Launch Program 并启动。
- 方式三 使用 nodemon 热重载 + 调试
- 安装：npm install -g nodemon
- 配置 nodemon.json：
- {
- “watch”: [“src”],
- “exec”: “node --inspect-brk src/app.js”
- }
- 启动：nodemon
- 方式四 命令行调试器 node inspect
- 启动：node inspect app.js
- 常用命令：n（下一步）、c（继续）、s（步入）、o（跳出）、repl（进入 REPL）、setBreakpoint/ sb、watch。
- 提示：若需远程调试，请确保 9229 端口可达，并在目标机器的 chrome://inspect 中可见。
三 前端与浏览器调试
- 本地页面：在 Debian 上使用 Chrome/Firefox 打开页面，按 F12 进入开发者工具，使用 Console 查看报错、Sources 面板设置断点与单步执行。
- 远程/无头 Chrome 调试（服务器场景）
- 启动无头 Chrome 并开启远程调试端口（示例端口 5333）：
- google-chrome --disable-gpu --headless --no-sandbox --remote-debugging-address=0.0.0.0 --remote-debugging-port=5333
- 本地或跳板机上打开 chrome://inspect，点击 Configure 添加 服务器IP:5333，在 Remote Target 中 inspect 目标页面。
- 移动端/USB 调试：在开发机启动 Chrome 的 远程调试端口，在 chrome://inspect/#devices 中启用 发现 USB 设备 与 端口转发，即可在手机上调试页面。
四 日志与问题定位技巧
- 结构化日志：使用 debug 模块按命名空间输出，便于按需开启。
- 安装：npm install debug
- 使用：
- const debug = require(‘debug’)(‘myapp’);
- debug(‘Hello, %s’, ‘world’);
- 运行：DEBUG=myapp node app.js（或 DEBUG=myapp:* 开启子命名空间）。
- 严格模式与类型检查：在代码顶部加入 ‘use strict’，必要时引入 TypeScript/Flow 在编译期减少类型错误。
- 测试驱动定位：使用 Jest/Mocha/Jasmine 编写单元/集成测试，快速回归验证。
- 示例：npm install --save-dev jest；在 package.json 添加脚本 “test”: “jest”。
五 常见问题与排查
- 看不到 Remote Target：确认应用已以 –inspect/–inspect-brk 启动，且 9229 端口未被防火墙拦截；必要时使用 –inspect-brk 确保首行暂停等待连接。
- 远程服务器无法 inspect：服务器需以 –remote-debugging-address=0.0.0.0 监听，并在 chrome://inspect 的 Configure 中填写 服务器IP:端口；云服务器需开放对应安全组/防火墙端口。
- 无头环境无法打开 DevTools：无头模式不支持直接 UI 操作，使用 远程调试端口 + 本地 DevTools 进行可视化调试。
- 断点不生效或代码未加载：确认 source map 配置正确（前端打包工具如 webpack/Vite），并在 Sources 面板检查实际加载的文件与路径映射。
