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

2次阅读

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

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

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

本文运行环境:MacBook Air,macos Sequoia。

一、设置条件断点

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

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

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

3、在弹出的输入框中输入布尔表达式,例如 i === 5user.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+DCmd+Shift+D)。

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+YCmd+Shift+Y)。

2、输入任意合法表达式,例如 document.querySelector(‘input’).valuearr.filter(x => x > 10)

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

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

站长
版权声明:本站原创文章,由 站长 2025-12-22发表,共计1364字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
1a44ec70fbfb7ca70432d56d3e5ef742
text=ZqhQzanResources