ubuntu js如何调试代码错误

Ubuntu下JavaScript调试方法汇总

1. 浏览器开发者工具（适用于前端JS）

浏览器内置的开发者工具是调试前端JavaScript的标准工具，支持断点调试、变量查看、调用堆栈分析等功能。

• 打开开发者工具：在Chrome/Firefox中，右键点击页面选择“检查”（Inspect），或按F12键。
• 进入Sources面板：切换至“Sources”（Chrome）或“调试器”（Firefox）选项卡，左侧会显示项目中的JavaScript文件。
• 设置断点：点击代码行号，添加断点（红色圆点）。
• 触发调试：刷新页面或执行对应操作（如点击按钮），代码会在断点处暂停。
• 调试操作：使用顶部按钮控制执行流程（继续F5、单步跳过F10、单步进入F11、单步跳出Shift+F11），查看变量值、调用堆栈等信息。

2. Node.js内置调试器（适用于服务端JS）

Node.js自带基于Chrome DevTools协议的调试器，无需额外安装工具，适合调试服务端脚本。

• 添加断点：在代码中插入debugger;语句，执行到此处会自动暂停。
• 启动调试：
  • 方式1：终端运行node inspect your_script.js，调试器会在debugger;处暂停。
  • 方式2：使用--inspect或--inspect-brk标志启动（--inspect-brk会在第一行暂停），例如node --inspect-brk app.js，调试器会在端口9229监听。
• 连接调试客户端：
  • 终端方式：调试器启动后，输入c（继续）、n（单步执行）、s（单步进入）等命令控制执行。
  • Chrome方式：打开chrome://inspect，点击“Remote Target”中的“inspect”链接，打开Chrome DevTools进行可视化调试。

3. Visual Studio Code（推荐，跨环境支持）

VSCode是Ubuntu下最流行的代码编辑器之一，内置强大的JavaScript调试功能，支持前端、Node.js及远程调试。

• 准备工作：安装VSCode及Node.js扩展（如“ESLint”“Debugger for Chrome”）。
• 配置launch.json：
  1. 打开项目文件夹，点击左侧“运行和调试”图标（虫子+三角形）。
  2. 点击齿轮图标，选择环境（如“Node.js”），生成launch.json文件。
  3. 修改配置（示例）：

     {
       "version": "0.2.0",
       "configurations": [
         {
           "type": "node",
           "request": "launch",
           "name": "Launch Program",
           "program": "${workspaceFolder}/your_script.js" // 替换为你的入口文件
         },
         {
           "type": "chrome",
           "request": "launch",
           "name": "Launch Chrome",
           "url": "http://localhost:3000", // 前端项目地址
           "webRoot": "${workspaceFolder}"
         }
       ]
     }
     

• 启动调试：选择配置（如“Launch Program”），点击绿色三角形按钮，VSCode会在断点处暂停，支持变量查看、调用堆栈分析等功能。

4. 第三方调试工具（可选）

• ndb：基于Chrome DevTools的高级调试工具，支持性能分析、内存泄漏检测。安装：npm install -g ndb，运行：ndb your_script.js。
• node-inspector：老牌调试工具，需配合Chrome使用。安装：npm install -g node-inspector，运行：node-debug your_script.js。

5. 基础调试技巧（快速排查）

• console.log：在代码中添加console.log(variable)或console.error(error)，打印变量值或错误信息，快速定位问题位置。
• 错误信息分析：运行脚本时，终端会显示错误类型（如SyntaxError、ReferenceError）和位置（文件名+行号），优先根据错误信息修改代码。