要让vscode的断点在typescript代码中生效，必须正确配置源映射和调试环境，具体步骤如下：1. 确保项目根目录有tsconfig.json文件，若无则通过tsc –init生成；2. 在tsconfig.json中设置”sourcemap”: true以生成.map文件，并配置”outdir”: “./dist”指定编译输出目录；3. 在launch.json中配置调试器，设置”type”: “pwa-node”、”request”: “launch”、”program”: “${workspacefolder}/dist/index.js”指向编译后的入口文件；4. 配置”prelaunchtask”: “tsc: build – tsconfig.json”确保调试前自动编译typescript；5. 设置”outfiles”: [“${workspacefolder}/dist/*/.js”]告知调试器源映射文件位置；6. 在typescript文件中设置断点并启动调试，若断点未命中需检查编译是否成功、路径是否正确、sourcemap和outfiles配置是否匹配；7. 调试异步代码时可在async函数或promise回调中直接设断点；8. 调试第三方库时建议使用logpoints、条件断点或阅读源码，而非直接进入node_modules调试；9. 提升效率的技巧包括使用条件断点、命中次数断点、logpoints、监视表达式、调试控制台执行代码及启用异常断点。只有当所有配置协同工作时，调试器才能正确将javascript运行时行为映射回typescript源码并实现断点命中。
在VSCode里调试TypeScript代码，核心在于利用其内置的调试器，并配置好源映射（Source Map），让调试器能把运行时的JavaScript代码映射回你编写的TypeScript源码。这通常涉及到
tsconfig.json
和
launch.json
这两个文件的正确设置。
解决方案
要让VSCode的断点在TypeScript代码中生效，你需要确保以下几个关键步骤和配置：
准备项目： 你的TypeScript项目需要有
tsconfig.json
文件。如果没有，可以通过
tsc --init
命令生成。
配置
tsconfig.json
：
"sourceMap": true
: 这是最重要的一步，它告诉TypeScript编译器在编译
.ts
文件时生成对应的
.js.map
文件。这些
.map
文件就是调试器将编译后的JavaScript代码与原始TypeScript代码关联起来的桥梁。
"outDir": "./dist"
(或者其他你偏好的输出目录): 指定编译后的JavaScript文件存放的位置。调试器需要知道去哪里找到可执行的JavaScript文件。
一个典型的
tsconfig.json
片段可能看起来像这样：
{ "compilerOptions": { "target": "es2018", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "sourceMap": true // 确保这一行是 true }, "include": ["src/**/*.ts"], "exclude": ["node_modules"]}
配置
launch.json
： 这是VSCode调试器的核心配置文件。在VSCode中，点击左侧的“运行和调试”图标（虫子形状），然后点击“创建
launch.json
文件”。选择“Node.js”环境。你会得到一个默认配置，我们需要对其进行调整。
一个针对TypeScript的典型
launch.json
配置如下：
{ "version": "0.2.0", "configurations": [ { "type": "pwa-node", // 推荐使用 pwa-node，它是 node 调试器的增强版 "request": "launch", "name": "调试 TypeScript 应用", "skipFiles": ["/**"], "program": "${workspaceFolder}/dist/index.js", // 指向编译后的 JS 入口文件 "preLaunchTask": "tsc: build - tsconfig.json", // 运行调试前先编译 TypeScript "outFiles": ["${workspaceFolder}/dist/**/*.js"] // 告诉调试器去哪里找源映射文件 } ]}
"type": "pwa-node"
: 这是Node.js调试器的最新推荐类型。
"program": "${workspaceFolder}/dist/index.js"
: 这里需要指向你的TypeScript编译后生成的JavaScript入口文件。如果你的入口是
src/app.ts
，编译后通常会在
dist/app.js
。
"preLaunchTask": "tsc: build - tsconfig.json"
: 这一行非常关键。它确保在每次启动调试前，TypeScript代码都会被重新编译。这个任务需要你在
.vscode/tasks.json
中定义，或者VSCode会自动为你识别
tsc
命令。如果你的
tsconfig.json
在根目录，这个任务名通常就是
tsc: build - tsconfig.json
。
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
: 告诉调试器，你的JavaScript输出文件（以及对应的
.map
文件）在哪里。这确保了源映射能够正确工作。
设置断点： 在你的TypeScript (
.ts
) 文件中，点击你想要暂停的代码行号左侧的空白区域，会出现一个红点，这就是断点。
启动调试： 确保你在VSCode左侧的“运行和调试”视图中，选择了你刚刚配置好的“调试 TypeScript 应用”配置，然后点击绿色的“启动调试”按钮（或按F5）。
如果一切配置正确，当你的代码执行到断点处时，程序就会暂停，你可以在VSCode的调试面板中查看变量、调用堆栈，并单步执行代码。
为什么我的断点没有命中？常见问题排查
断点没命中是初学者最常遇到的问题，我个人也曾在这上面花了不少时间。这通常不是一个单一原因导致的，而是一系列配置或理解上的偏差。
首先，最直接的检查是：你的程序真的运行到断点那一行了吗？有时候我们以为代码会执行到，但实际上由于逻辑分支、错误提前退出等原因，那行代码根本就没被触达。这是最基础的排查。
其次，就是配置问题了。我发现很多人会忘记或误解
sourceMap
和
outFiles
的作用。
sourceMap: true
在
tsconfig.json
里是告诉TypeScript编译器：“嘿，编译的时候顺便给我生成一个
.map
文件，里面记录着JS代码和TS代码的对应关系。”而
outFiles
在
launch.json
里则是告诉VSCode调试器：“你的JavaScript可执行文件和对应的
.map
文件都在这个路径下，去那里找它们来做映射。”如果
.map
文件没生成，或者调试器没找到它，那断点自然就无法从TS映射到JS，也就无法命中了。
另一个常见陷阱是
preLaunchTask
没有正确执行，或者根本没有配置。如果你的TypeScript代码没有在调试前被编译成JavaScript，那么调试器根本就没有可执行的代码去运行，更别提断点了。确保你的
tasks.json
（通常在
.vscode
目录下）里有一个名为
tsc: build - tsconfig.json
（或与你
launch.json
中
preLaunchTask
匹配的名称）的任务，并且这个任务能够成功编译你的TypeScript代码。你可以在终端里手动运行
npm run build
或者
tsc
来确认编译是否成功，以及
dist
目录下是否生成了最新的JavaScript和
.map
文件。
最后，路径问题也时常困扰人。
program
属性指向的JavaScript文件路径是否正确？它应该是编译后的入口文件，而不是TypeScript源文件。如果你的项目结构比较复杂，或者有多个入口点，确保你指向的是当前调试会话真正会执行的那个JS文件。有时候，一个小的拼写错误或者路径斜杠方向不对，都可能导致调试器找不到目标。
如何调试异步代码或第三方库？
调试异步代码在VSCode中其实相当自然，因为现代的JavaScript调试器对Promise、async/await等异步机制有很好的支持。你只需要像在同步代码中一样，在
async
函数内部、
await
表达式后面，或者Promise的
.then()
、
.catch()
回调函数内部设置断点即可。当异步操作完成并执行到这些代码时，断点会正常命中。我个人觉得这块VSCode做得非常棒，基本上不需要额外配置。
至于调试第三方库，这就有点复杂了，看情况。
如果第三方库提供了Source Map（通常在
node_modules
目录下），并且你的
launch.json
配置的
outFiles
也包含了
node_modules
（尽管这不常见，因为会拖慢调试），理论上你可以直接在
node_modules
里的TypeScript源文件上设置断点。但实际上，很少有人会这么做，因为
node_modules
里面的代码量巨大，单步调试进去会让你迷失方向。
更实际的场景是，你主要调试的是你自己的代码如何与第三方库交互。你可以在调用第三方库函数的前后设置断点，检查传入的参数和返回的结果。如果需要深入了解库的内部行为，我通常会采取以下几种策略：
阅读库的文档和源代码： 这是最直接有效的方法。很多时候，与其盲目调试，不如直接看懂库的设计思路和API细节。利用Logpoints： VSCode的Logpoints（日志点）非常强大。你可以在不修改代码的情况下，在某个地方设置一个“断点”，但它不是暂停执行，而是打印出一些变量的值。这对于追踪库内部某个变量的变化，或者某个函数是否被调用，非常有用。条件断点： 如果你怀疑某个库函数在特定条件下行为异常，可以设置一个条件断点，只有当某个变量满足特定条件时才暂停。
skipFiles
配置： 在
launch.json
中，你可以利用
skipFiles
属性来告诉调试器跳过某些文件，比如
"/**", "${workspaceFolder}/node_modules/**/*.js"
。这样，当你单步调试时，就不会不小心“跳进”Node.js的内部模块或者
node_modules
里的第三方库代码，保持调试的焦点在你自己的代码上。当然，如果你真的想进去，可以暂时移除这条配置。
我个人经验是，大部分时候你不需要真的“调试”第三方库的内部，而是要理解你的代码是如何使用它的，以及它返回了什么。如果库本身有问题，那通常是上报bug或者寻找替代方案了。
除了断点，还有哪些调试技巧可以提升效率？
断点无疑是调试的基石，但VSCode的调试器远不止于此。掌握一些高级技巧，能让你的调试体验效率倍增，减少那些漫无目的的
console.log
。
一个我个人非常喜欢用的功能就是条件断点（Conditional Breakpoints）。想象一下，你的循环迭代了上千次，只有在
i === 999
的时候才出现问题。你不可能每次都F5然后点几百次“继续”。这时，你可以在断点上右键，选择“编辑断点”，然后输入一个表达式，比如
i === 999
。这样，只有当这个条件满足时，程序才会暂停。这简直是调试复杂循环和特定场景错误的利器。类似地，还有命中次数断点（Hit Count Breakpoints），可以设置断点在被执行了N次之后才暂停。
Logpoints（日志点）是我在不想修改代码，但又想快速查看某个变量值时的首选。它就像一个临时的
console.log
，但不需要你手动添加和删除代码。右键断点位置，选择“添加日志点”，然后输入一个表达式，比如
'当前值为：' + myVariable
。当代码执行到这里时，它会在调试控制台输出这个信息，但程序不会暂停。这对于理解代码流向和变量变化非常有帮助，尤其是在异步代码中，你可能不希望每次都暂停。
监视（Watch）表达式也是一个强大的工具。在调试视图的“监视”面板中，你可以添加任何你想要观察的变量或表达式。当你单步执行代码时，这些表达式的值会实时更新。这比你每次都把鼠标悬停在变量上看值要高效得多，尤其当你需要同时观察多个相关变量时。
调试控制台（Debug Console）不仅仅是用来输出日志的。在程序暂停时，你可以在调试控制台里输入JavaScript代码，并执行它们。这意味着你可以实时地检查变量的值，甚至修改它们（如果环境允许），或者调用当前作用域内的函数。这对于快速验证某个假设，或者在不重新启动程序的情况下尝试修复某个小问题，非常有用。比如，你发现一个对象属性是
undefined
，你可以在控制台尝试手动给它赋值，然后继续执行，看看是否能绕过错误。
最后，别忘了异常断点（Exception Breakpoints）。在调试视图的“断点”面板中，你可以勾选“未捕获的异常”或“已捕获的异常”。这样，无论你的代码在哪里抛出异常，调试器都会立即暂停，让你有机会检查异常发生时的调用堆栈和变量状态。这比让程序崩溃然后看堆栈信息要直观得多，尤其是在你不知道异常会在哪里抛出时。
以上就是VSCode 怎样使用断点调试 TypeScript 代码 VSCode 断点调试 TypeScript 代码的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/30892.html
微信扫一扫 
支付宝扫一扫 
