VSCode高级调试技巧：条件断点、日志点与异常捕获

VSCode调试支持条件断点、日志点、异常断点、“仅我的代码”模式及调试控制台动态执行。条件断点按布尔表达式触发；日志点输出信息不中断执行；异常断点捕获指定错误；skipFiles跳过第三方代码；调试控制台可实时求值与修改变量。

如果您在使用 VSCode 进行代码调试时希望精准控制断点触发时机、避免打断执行流或直接观察变量行为，则可能需要借助条件断点、日志点与异常捕获等高级功能。以下是实现这些功能的具体操作方式：

本文运行环境：MacBook Air，macOS Sequoia。

一、设置条件断点

条件断点允许您仅在特定表达式为真时暂停程序执行，适用于循环中只关注某次迭代、或仅当某变量达到阈值时调试的场景。

1、在代码行号左侧灰色区域单击，设置普通断点。

2、右键点击已设置的断点红点，选择 Edit Breakpoint。

3、在弹出的输入框中输入布尔表达式，例如 i === 5 或 user.id > 100。

4、按下回车确认，断点图标将变为橙色三角形加感叹号标识。

二、插入日志点（Logpoint）

日志点不中断执行，仅向调试控制台输出指定内容，适合监控高频调用函数中的变量状态，同时保持程序流畅运行。

1、在目标代码行左侧灰色区域按住 Ctrl 键（Windows/Linux）或 Cmd 键（macOS），再单击设置断点。

2、右键点击该断点，选择 Edit Breakpoint。

3、在输入框中输入要打印的字符串，支持模板语法，例如 "User: ${user.name}, Status: ${user.active}"。

4、保存后，该行执行时将在调试控制台输出对应信息，且程序不会暂停。

三、配置异常断点

异常断点可在 JavaScript/TypeScript 抛出未捕获异常或特定类型异常（如 ReferenceError、TypeError）时立即中断，便于定位异常源头。

1、打开调试视图（Ctrl+Shift+D 或 Cmd+Shift+D）。

星绘

豆包旗下 AI 写真、P 图、换装和视频生成

429

查看详情

2、点击调试面板顶部的 Breakpoints 部分下方的 +（加号） 图标。

3、从下拉菜单中选择 JavaScript Exception Breakpoint。

4、勾选 All Exceptions 启用全局异常中断，或展开后单独勾选 Uncaught Exceptions 及具体异常类型。

四、启用“仅我的代码”模式

该模式可自动跳过 node_modules 和系统库中的代码，使调试焦点始终停留在项目源码内，避免误入第三方模块内部。

1、在启动调试前，打开 .vscode/launch.json 文件。

2、在对应配置的 configurations 对象中添加字段："skipFiles": ["/**"]。

3、保存文件并重启调试会话，F11 单步进入时将不再进入内置模块。

五、使用调试控制台执行动态表达式

调试控制台支持在暂停状态下实时求值、修改变量、调用函数，是验证逻辑与快速修复的高效入口。

1、程序在断点处暂停后，确保焦点位于调试控制台（Ctrl+Shift+Y 或 Cmd+Shift+Y）。

2、输入任意合法表达式，例如 document.querySelector('input').value 或 arr.filter(x => x > 10)。

3、按回车执行，结果将立即显示在控制台中。

4、若需修改变量，可直接输入赋值语句，例如 count = 0，后续继续执行将使用新值。

以上就是VSCode高级调试技巧：条件断点、日志点与异常捕获的详细内容，更多请关注php中文网其它相关文章！