如何在Debian下调试JS代码

在 Debian 下调试 JavaScript 的高效方法

一 环境准备

• 安装运行时与包管理：在 Debian 上执行以下命令安装 Node.js 与 npm（建议优先使用 Node.js 14+ 以获得更好的调试体验）。
  • sudo apt update
  • sudo apt install nodejs npm
• 验证安装：
  • node -v
  • npm -v
• 说明：本文方法适用于 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 面板检查实际加载的文件与路径映射。