如何用Ubuntu调试JS代码

使用浏览器开发者工具调试浏览器端JS代码
适用于调试运行在Ubuntu浏览器中的JavaScript（如网页交互、前端框架代码）。

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

使用Node.js内置调试器调试服务端JS代码
适用于调试Node.js应用（如Express、Koa后端服务）。

• 添加断点：在代码中插入debugger;语句（如路由处理函数内），或直接依赖调试器自动暂停。
• 启动调试模式：终端运行node --inspect your_script.js（正常启动并等待调试器连接）或node --inspect-brk your_script.js（在第一行暂停，便于初始断点设置）。
• 连接调试客户端：
  • Chrome DevTools：打开Chrome浏览器，访问chrome://inspect，在“Remote Target”中找到你的Node.js进程，点击“inspect”打开专用调试窗口。
  • 命令行调试器：运行node inspect your_script.js，通过cont（继续）、next（单步跳过）、step（单步进入）等命令控制执行。

使用Visual Studio Code（VSCode）调试JS代码
适用于需要图形化界面、高效管理的开发者，支持浏览器端和Node.js端。

• 准备工作：安装VSCode及Node.js扩展（如“ESLint”“Prettier”）。
• 创建launch.json：
  1. 打开项目文件夹，点击左侧“Run and Debug”图标（或按Ctrl+Shift+D）。
  2. 点击齿轮图标，选择“Node.js”环境，生成.vscode/launch.json文件。
  3. 配置示例：
     • 调试Node.js应用：

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

     • 调试浏览器端代码（需配合Chrome扩展）：

       {
         "version": "0.2.0",
         "configurations": [
           {
             "type": "chrome",
             "request": "launch",
             "name": "Launch Chrome",
             "url": "http://localhost:3000", // 你的应用地址
             "webRoot": "${workspaceFolder}"
           }
         ]
       }
       

• 启动调试：在代码中添加断点，点击“Run and Debug”面板的绿色三角形按钮（或按F5），VSCode会自动启动调试会话，支持变量查看、调用堆栈分析等功能。

补充：基础调试技巧

• console.log：在代码中插入console.log(variable)，输出变量值到终端，快速定位问题（适用于简单调试）。
• 第三方工具：
  • ndb：基于Chrome DevTools的高级Node.js调试器，提供更丰富的功能（如内存分析），安装命令：npm install -g ndb，运行ndb your_script.js。
  • node-inspector：旧版调试工具（已逐渐被内置调试器取代），安装：npm install -g node-inspector，运行node-debug your_script.js。