vscode断点用法介绍

在编程开发过程中，调试是一个不可避免的环节。而断点就是调试的利器之一。vscode的断点功能十分强大，今天我们就来详细讲解一下vscode断点的使用方法和技巧。

一、断点的常规使用

1、设置断点：

function test() {
    let a = 1;
    let b = 2;
    let c = a + b;
}
test();


在代码编辑器左侧的行号区域左击即可设置断点，点击行号区域会出现断点标记，同时在代码行上也会出现一个红圆点标示。如下：
function test() {
    debugger;
    let a = 1;
    let b = 2;
    let c = a + b;
}
test();

2、触发断点：
在调试模式下点击左侧的“调试”按钮，然后再点击弹出的“启动调试”按钮即可启动调试模式。在代码执行到断点位置时，程序会自动停下，然后进入到vscode的调试模式中。
3、断点控制：
调试模式下，vscode提供了常用的断点控制功能，可以单步执行、跳过、继续执行和停止调试等。如下图：


二、断点高级技巧
1、条件断点：
条件断点可以让断点只有在满足特定条件时才会生效。例如，我们希望在a等于3的时候停下来，就可以使用条件断点。
function test() {
    let a = 1;
    let b = 2;
    let c = a + b;
}
test();

在第2行左键单击，在弹出的菜单中选择“条件断点”选项，然后输入条件表达式“a===3”即可。如下：
function test() {
    debugger;
    let a = 3;
    let b = 2;
    let c = a + b;
}
test();

注意：条件表达式必须是一个返回布尔值的表达式。
2、日志断点：
日志断点可以在断点处将日志信息输出到控制台，而不是像普通的断点一样暂停代码执行。如下：
function test() {
    let a = 1;
    let b = 2;
    console.log('a:', a, 'b:', b); // 日志断点
    let c = a + b;
}
test();

在执行到第4行时，控制台会输出“a: 1 b: 2”。
3、行内断点：
行内断点可以快速创建一个断点，而不需要在左侧的行号区域中点击。
function test() {
    let a = 1;
    let b = 2;
    let c = a + b;debugger; // 行内断点
}
test();

以上就是高级断点的用法。这些功能可以使我们在调试过程中更加高效、准确地找到问题所在。

三、总结
本文详细介绍了vscode断点的常规用法和高级技巧，这些技巧能够提高我们的调试效率。但是，在使用断点的过程中也需要注意，不要滥用断点，否则会影响程序的性能。最后，希望本文对大家有所帮助。