0

0

VSCode调试配置怎么设置_断点调试与launch.json配置教程

夢幻星辰

夢幻星辰

发布时间:2026-01-12 19:30:37

|

470人浏览过

|

来源于php中文网

原创

VSCode断点调试在单文件JS时可自动生成配置,但多环境、多入口、带参数、TypeScript或附加进程等场景必须手动配置launch.json;最小配置需含version、type、request、name和绝对路径program。

vscode调试配置怎么设置_断点调试与launch.json配置教程

VSCode 的断点调试不依赖 launch.json 也能启动,但绝大多数真实项目(尤其是多环境、多入口、带参数或需附加进程的场景)必须靠它精准控制调试行为。盲目复制网上的模板反而容易触发 Cannot find runtime 'node' on PATHProgram path does not exist 这类错误。

什么时候必须手动配置 launch.json

不是所有项目都需要它:单文件 JS 直接按 F5,VSCode 会自动生成临时配置;但以下情况必须编辑 .vscode/launch.json

  • 入口文件不是 index.js 或不在项目根目录(比如 src/cli.js
  • 需要传命令行参数(如 --env=dev)或设置环境变量(NODE_ENV=production
  • 调试 TypeScript 项目(需指定 outFiles 或启用 sourceMaps
  • 附加(attach)到已运行的 Node 进程(如本地启动的 Express 服务)
  • 调试 Web 应用时需同时启动浏览器并自动打开 URL

launch.json 最小可用配置长什么样

以调试一个 src/app.js 的 Node 脚本为例,这是去掉所有可选字段后的最简有效配置:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch app.js",
      "skipFiles": ["/**"],
      "program": "${workspaceFolder}/src/app.js"
    }
  ]
}

关键点:

椒图AI
椒图AI

中文AI修图神器,一句话搞定复杂修图

下载
  • "type": "node" 表示使用 Node.js 调试器;如果是 Chrome 调试前端,这里得是 "pwa-chrome"
  • "request": "launch" 表示“启动新进程”,对应 "request": "attach" 是连接已有进程
  • "program" 必须是绝对路径,${workspaceFolder} 是唯一安全的变量;写相对路径(如 "./src/app.js")在某些工作区结构下会失败
  • "skipFiles" 不是必须,但强烈建议加上,否则调试时会频繁跳进 Node 内部代码

常见报错和对应修复项

这些错误几乎都源于路径、类型或运行时上下文不匹配:

  • Cannot find runtime 'node' on PATH → 检查系统是否安装 Node,且 VSCode 终端里执行 which node(macOS/Linux)或 where node(Windows)能返回路径;若用 nvm/nodenv,需在 VSCode 外部终端中启动 VSCode(如 code .),而非从 Dock 或开始菜单直接打开
  • Program path does not exist → 把 "program" 值粘贴到终端执行 ls -l [路径] 验证是否存在;注意 Windows 路径分隔符不用反斜杠(\),统一用正斜杠(/)或双反斜杠(\\
  • 断点显示为空心圆(未绑定)→ 检查是否启用了 source map:TypeScript 项目需确保 tsconfig.json"sourceMap": true,且 launch.json 中添加 "sourceMaps": true"outFiles": ["${workspaceFolder}/dist/**/*.js"]
  • 调试时控制台无输出 / 输出乱码 → 在 launch.json 中加 "console": "integratedTerminal",强制输出到集成终端而非调试控制台

真正难的不是写对配置,而是理解每个字段背后绑定的运行时行为——比如 cwd 控制的是 process.cwd(),而 env 设置的是子进程环境变量,这两者错位会导致 require 路径失败或 dotenv 加载不到文件。改完配置别急着点绿色三角,先看右下角调试面板里显示的完整启动命令,它比任何文档都诚实。

相关专题

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

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

410

2023.08.07

json是什么
json是什么

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

532

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相关的文章、下载、课程内容,供大家免费下载体验。

770

2023.08.11

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

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

729

2023.11.06

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

464

2023.11.27

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

74

2025.09.05

Java 项目构建与依赖管理(Maven / Gradle)
Java 项目构建与依赖管理(Maven / Gradle)

本专题系统讲解 Java 项目构建与依赖管理的完整体系,重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例,帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程,提升在实际团队开发中的工程能力与协作效率。

10

2026.01.12

热门下载

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

精品课程

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

共48课时 | 7万人学习

Git 教程
Git 教程

共21课时 | 2.6万人学习

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

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