ZhenYu's 知识库

外观

VSCode 调试技巧

约 629 字大约 2 分钟

VSCode调试

2024-08-13

基础调试

断点类型

类型说明快捷键
行断点在代码行暂停F9
条件断点满足条件时暂停右键断点 → 编辑条件
日志断点打印日志不暂停右键断点 → 添加日志
异常断点在异常处暂停断点面板启用

调试面板

// launch.json - 调试配置
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动 Node",
      "program": "${workspaceFolder}/src/index.js",
      "cwd": "${workspaceFolder}",
      "args": ["--flag"],
      "env": { "NODE_ENV": "development" }
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "启动 Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/public"
    }
  ]
}

Node.js 调试

启动脚本

{
  "name": "Launch via NPM",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run", "dev"],
  "skipFiles": ["<node_internals>/**"],
  "env": {
    "NODE_ENV": "development"
  }
}

附加到进程

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Node",
  "port": 9229,
  "restart": true,
  "skipFiles": ["<node_internals>/**"]
}

nodemon 调试

# 启动 nodemon 并开启调试
nodemon --inspect-brk server.js

JavaScript 调试

Web 应用

{
  "type": "chrome",
  "request": "launch",
  "name": "Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "preLaunchTask": "npm: build"
}

调试脚本

// debug.js
const debug = require('debug');
debug.enable('app:*');

const log = debug('app:start');
log('Application starting...');
DEBUG=app:* node debug.js

Vue 调试

Chrome + Vue DevTools

  1. 安装 Vue DevTools 扩展
  2. Vue 3 默认支持
  3. Vue 2 需要配置
// main.js (Vue 2)
import Vue from 'vue';
Vue.config.devtools = true;

VSCode 调试 Vue

{
  "type": "chrome",
  "request": "launch",
  "name": "调试 Vue",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/src/*"
  }
}

React 调试

Source Maps

// webpack.config.js
module.exports = {
  devtool: 'source-map',
};

调试配置

{
  "type": "chrome",
  "request": "launch",
  "name": "调试 React",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/src/*"
  }
}

调试面板功能

变量面板

  • 查看当前作用域变量
  • 修改变量值 (右键 → 设置值)
  • 监视特定表达式

调用堆栈

  • 查看函数调用链
  • 点击跳转到调用位置
  • 切换不同堆栈帧

调试控制台

> 变量名  // 查看变量值
> 函数名() // 执行函数
> 表达式  // 求值表达式

高级技巧

条件断点

// 右键断点 → 编辑条件
user && user.id === 123 && index > 5

日志点

// 右键断点 → 添加日志
`Processing item ${index}: ${item.name}`

调试时执行代码

// 在调试控制台
> 2 + 2
4
> JSON.stringify(budget, null, 2)

调试 Worker

{
  "type": "node",
  "request": "launch",
  "name": "Worker",
  "program": "${workspaceFolder}/worker.js"
}

Node Inspector

# 使用 Chrome DevTools 调试
node --inspect-brk server.js

# 或使用 ndb
npx ndb server.js

常见问题

断点变灰

  • 检查 source maps 配置
  • 确认文件匹配路径
  • 尝试重新编译

无法附加

  • 确认进程使用 --inspect 启动
  • 检查端口是否被占用
  • 防火墙设置

Source maps 不工作

{
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/src/*"
  }
}