VS Code debugfunctions详解

1. debugoverview

debug is Software Development过程in不可 or 缺 环节, 它helpingDevelopment者定位 and 修复codein error. VS Code in 置了强 big debugfunctions, support many 种programminglanguage, includingJavaScript, TypeScript, Python, Java, C#etc..

VS Code debugfunctionsproviding了以 under corefeatures:

• 直观 debug界面 and 控制面板
• flexible 断点设置 (行断点, 条件断点, log点etc.)
• 实时variable查看 and modify
• 调用栈 and 作用域查看
• debug控制台support
• 自定义debugconfiguration

2. debug界面

VS Code debug界面主要由以 under 几个部group成:

2.1 debug视graph

through left 侧活动栏 debuggraph标 (虫子graph标) 打开debug视graph, 主要package含:

• debugconfiguration选择器
• 断点list
• variable面板
• 监视面板
• 调用栈面板
• 加载 脚本面板

2.2 debugtool栏

debug时会显示debugtool栏, package含以 under 控制按钮:

• 继续/暂停 (F5)
• 单步跳过 (F10)
• 单步debug (F11)
• 单步跳出 (Shift+F11)
• 重 new 开始 (Ctrl+Shift+F5)
• 停止 (Shift+F5)

2.3 debug控制台

debug控制台用于显示debug输出 and 执行debugcommands, support and debugin 程序for交互.

3. debugconfiguration

VS Codeusinglaunch.jsonfile来configurationdebugsession. 首次启动debug时, VS Code会提示你creation这个file.

3.1 creationlaunch.json

1. 打开debug视graph
2. 点击"creationlaunch.jsonfile"
3. 选择你 environment (such asNode.js, Pythonetc.)
4. VS Code会自动生成Basicsconfiguration

3.2 launch.jsonexample

{  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

4. 断点设置

断点 is debug core, 它允许程序 in 指定位置暂停执行, 方便你查看variablestatus and 执行流程.

4.1 行断点

in 行号 left 侧单击即可设置行断点, 再次单击可delete. 行断点会 in 程序执行 to 该行时暂停.

4.2 条件断点

right 键点击断点, 选择"编辑断点", 可以设置条件表达式. 只 has 当条件 for 真时, 程序才会暂停.

// example: 只 has 当ietc.于5时才暂停
if (i === 5) {
    // code
}

4.3 log断点

log断点允许你 in 不暂停程序 circumstances under 记录information to debug控制台. right 键点击断点, 选择"编辑断点", 然 after 选择"log点", 输入要记录 表达式.

4.4 function断点

in debug视graph 断点面板in点击"+", 选择"function断点", 输入function名. 当程序执行 to 该function时会暂停.

5. debug控制

设置断点 after , 点击debugtool栏in "开始debug"按钮 or 按F5启动debug. 程序会 in 第一个断点处暂停, 此时你可以:

5.1 单步执行

• 单步跳过 (F10) : 执行当 before 行, 然 after 跳 to under 一行, 不进入function调用
• 单步debug (F11) : 执行当 before 行, such as果 is function调用则进入function in 部
• 单步跳出 (Shift+F11) : from 当 before function跳出, 回 to 调用该function 位置

5.2 继续执行

点击"继续"按钮 or 按F5, 程序会继续执行直 to 遇 to under 一个断点 or 程序结束.

5.3 variable查看 and modify

in variable面板in, 你可以查看当 before 作用域 in 所 has variable及其值. 你可以:

• unfoldobject查看其property
• 双击variable值formodify
• in 监视面板in添加要持续监视 variable

5.4 调用栈查看

调用栈面板显示了程序执行 to 当 before 位置 function调用path, 你可以:

• 点击栈帧切换 to for 应 function on under 文
• 查看每个栈帧 variable and 作用域

6. debug控制台

debug控制台用于:

• 显示程序 输出information
• 执行JavaScript表达式 ( in debug on under 文 in )
• 查看errorinformation

你可以usingconsole.log() in codein输出debuginformation, 这些information会显示 in debug控制台in.

console.log("variable值:", variable);

7. 实践case: debugJavaScript程序

让我们through一个 simple JavaScript程序来实践VS Code debugfunctions:

7.1 creationtestfile

// app.js
function calculateSum(numbers) {
    let sum = 0;
    for (let i = 0; i <= numbers.length; i++) {
        sum += numbers[i];
    }
    return sum;
}

const numbers = [1, 2, 3, 4, 5];
const result = calculateSum(numbers);
console.log("总 and :", result);

7.2 configurationdebug

1. 点击 left 侧debuggraph标, 然 after 点击"creationlaunch.jsonfile"

2. 选择"Node.js"environment

3. VS Code会自动生成launch.jsonconfiguration

7.3 设置断点

in for循环行 and return sum行设置断点.

7.4 启动debug

点击"开始debug"按钮 or 按F5, 程序会 in 第一个断点处暂停.

7.5 debug过程

• 观察variable面板in i, sum and numbersvariable
• usingF10单步执行, 观察variable变化
• 发现issues: 循环条件应 for i < numbers.length, 而不 is i <= numbers.length
• 修复code, 重 new debug