0

0

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

P粉986688829

P粉986688829

发布时间:2025-12-23 12:16:05

|

736人浏览过

|

来源于php中文网

原创

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)。

AI智研社
AI智研社

AI智研社是一个专注于人工智能领域的综合性平台

下载

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,后续继续执行将使用新值。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

420

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

536

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

198

2023.11.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

320

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1502

2023.10.24

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 8.1万人学习

Git 教程
Git 教程

共21课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号