0

0

如何利用VSCode的断点与调试控制台排查错误【教程】

狼影

狼影

发布时间:2026-01-16 22:15:09

|

250人浏览过

|

来源于php中文网

原创

VSCode断点不触发主因是调试配置与运行环境不匹配:需确认launch.json的type、program路径、sourceMaps及preLaunchTask是否正确,区分launch/attach模式,合理配置skipFiles和端口。

断点不触发?检查调试配置是否匹配运行环境

vscode 的断点不生效,八成是 launch.json 配置和实际执行方式对不上。比如用 node index.js 启动,但 launch.json 里设的是 program 指向 src/index.ts,且没配 typescript 编译——断点自然不会停在源码上。

  • 确认 type 字段:Node.js 项目填 "node",Chrome 调试填 "pwa-chrome",TypeScript 项目必须加 "preLaunchTask": "tsc: build - tsconfig.json" 或启用 sourceMaps: true
  • 检查 program 路径是否为实际入口文件(如 "${workspaceFolder}/dist/index.js"),不是 TS 源码路径,除非已生成正确 source map
  • 若用 npm run dev 启动(如 nodemon、ts-node),需改用 attach 模式,而不是 launch;否则 VSCode 会另起一个进程,和你的终端进程无关

调试控制台输不出变量?注意作用域与求值时机

在断点暂停后,调试控制台(Debug Console)输入 user.nameReferenceError,往往不是变量不存在,而是当前执行上下文里它还没声明、已被释放,或属于闭包外层作用域。

  • 只允许访问「当前堆帧」可见的变量;函数参数、let/const 声明的局部变量在退出作用域后无法访问
  • console.log() 输出的内容 ≠ 调试控制台可访问内容:后者走的是 V8 的 debug protocol 求值,受严格作用域限制
  • 想强制查看闭包变量,可在断点处右键变量 → Add to Watch;Watch 窗口比 Debug Console 更稳定,支持延迟求值

修改代码后继续调试就跳过断点?热重载未同步调试状态

nodemonts-node --files 开发时,文件保存触发重启,但 VSCode 的调试会话仍连着旧进程,新代码的断点不会被识别,表现为“断点变空心”或“跳过不暂停”。

  • 不要依赖自动重启;改用 attach 模式配合 nodemon --inspect-brk:先启动带调试端口的服务,再让 VSCode 连上去
  • launch.json 中设置 "restart": true 仅对 launch 模式有效,且只适用于进程退出后自动重启,不适用于热更新场景
  • 常见错误配置:"port": 9229 写死,但 nodemon --inspect-brk 默认用 9229,而 node --inspect 可能用 9229~9239 动态端口;建议统一显式指定端口并关闭端口复用
{
  "type": "node",
  "request": "attach",
  "name": "Attach to Process",
  "port": 9229,
  "address": "localhost",
  "restart": true,
  "sourceMaps": true,
  "outFiles": ["${workspaceFolder}/dist/**/*.js"]
}

为什么 step into 总跳进 node_modules?忽略规则没生效

F11(Step Into)想进入自己写的函数,结果一头扎进 lodash.mergeexpress 内部,说明 skipFilessmartStep 没起作用。

AI at Meta
AI at Meta

Facebook 旗下的AI研究平台

下载
  • 优先用 "skipFiles":填 glob 模式,如 ["**/node_modules/**"],注意路径分隔符统一用 /(Windows 下也如此)
  • "smartStep": true 是辅助项,只对“明显非业务代码”的单步做跳过,不可靠;必须配合 skipFiles 才稳定
  • 某些库(如 ESM 包)可能因 source map 路径异常导致 skip 失效;可临时在 skipFiles 加更精确路径,如 "**/node_modules/lodash-es/**"

断点和调试控制台本身很轻量,真正卡住人的,往往是配置和运行模式之间的隐性错位。尤其在混合使用构建工具、转译器、进程管理器时,得先确认「VSCode 连的是哪个进程」「这个进程加载的是哪份代码」「source map 是否指向原始位置」——这三个问题没理清,调得再细也没用。

相关专题

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

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

412

2023.08.07

json是什么
json是什么

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

533

2023.08.23

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

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

309

2023.10.13

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

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

74

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

786

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

733

2023.11.06

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

524

2023.09.20

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

390

2023.07.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

43

2026.01.16

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.5万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 7.4万人学习

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

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