VSCode 怎样使用断点调试 TypeScript 代码 VSCode 断点调试 TypeScript 代码的方法​

<p>要让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源码并实现断点命中。</p>

在VSCode里调试TypeScript代码，核心在于利用其内置的调试器，并配置好源映射（Source Map），让调试器能把运行时的JavaScript代码映射回你编写的TypeScript源码。这通常涉及到

tsconfig.json

launch.json

解决方案

要让VSCode的断点在TypeScript代码中生效，你需要确保以下几个关键步骤和配置：

1. 准备项目： 你的TypeScript项目需要有

   tsconfig.json

   登录后复制
   文件。如果没有，可以通过

   tsc --init

   登录后复制
   命令生成。

2. 配置

   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"]
   }

   登录后复制

3. 配置

   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": ["<node_internals>/**"],
         "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

     登录后复制
     文件）在哪里。这确保了源映射能够正确工作。

4. 设置断点： 在你的TypeScript (

   .ts

   登录后复制
   ) 文件中，点击你想要暂停的代码行号左侧的空白区域，会出现一个红点，这就是断点。

5. 启动调试： 确保你在VSCode左侧的“运行和调试”视图中，选择了你刚刚配置好的“调试 TypeScript 应用”配置，然后点击绿色的“启动调试”按钮（或按F5）。

如果一切配置正确，当你的代码执行到断点处时，程序就会暂停，你可以在VSCode的调试面板中查看变量、调用堆栈，并单步执行代码。

为什么我的断点没有命中？常见问题排查

断点没命中是初学者最常遇到的问题，我个人也曾在这上面花了不少时间。这通常不是一个单一原因导致的，而是一系列配置或理解上的偏差。

首先，最直接的检查是：你的程序真的运行到断点那一行了吗？有时候我们以为代码会执行到，但实际上由于逻辑分支、错误提前退出等原因，那行代码根本就没被触达。这是最基础的排查。

其次，就是配置问题了。我发现很多人会忘记或误解

sourceMap

outFiles

sourceMap: true

tsconfig.json

.map

outFiles

launch.json

.map

.map

另一个常见陷阱是

preLaunchTask

tasks.json

.vscode

tsc: build - tsconfig.json

launch.json

preLaunchTask

npm run build

tsc

dist

.map

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

最后，路径问题也时常困扰人。

program

如何调试异步代码或第三方库？

调试异步代码在VSCode中其实相当自然，因为现代的JavaScript调试器对Promise、async/await等异步机制有很好的支持。你只需要像在同步代码中一样，在

async

await

.then()

.catch()

至于调试第三方库，这就有点复杂了，看情况。

如果第三方库提供了Source Map（通常在

node_modules

launch.json

outFiles

node_modules

node_modules

node_modules

更实际的场景是，你主要调试的是你自己的代码如何与第三方库交互。你可以在调用第三方库函数的前后设置断点，检查传入的参数和返回的结果。如果需要深入了解库的内部行为，我通常会采取以下几种策略：

1. 阅读库的文档和源代码： 这是最直接有效的方法。很多时候，与其盲目调试，不如直接看懂库的设计思路和API细节。
2. 利用Logpoints： VSCode的Logpoints（日志点）非常强大。你可以在不修改代码的情况下，在某个地方设置一个“断点”，但它不是暂停执行，而是打印出一些变量的值。这对于追踪库内部某个变量的变化，或者某个函数是否被调用，非常有用。
3. 条件断点： 如果你怀疑某个库函数在特定条件下行为异常，可以设置一个条件断点，只有当某个变量满足特定条件时才暂停。

4. skipFiles

   登录后复制
   配置： 在

   launch.json

   登录后复制
   中，你可以利用

   skipFiles

   登录后复制
   属性来告诉调试器跳过某些文件，比如

   "<node_internals>/**", "${workspaceFolder}/node_modules/**/*.js"

   登录后复制
   。这样，当你单步调试时，就不会不小心“跳进”Node.js的内部模块或者

   node_modules

   登录后复制
   里的第三方库代码，保持调试的焦点在你自己的代码上。当然，如果你真的想进去，可以暂时移除这条配置。

我个人经验是，大部分时候你不需要真的“调试”第三方库的内部，而是要理解你的代码是如何使用它的，以及它返回了什么。如果库本身有问题，那通常是上报bug或者寻找替代方案了。

除了断点，还有哪些调试技巧可以提升效率？

断点无疑是调试的基石，但VSCode的调试器远不止于此。掌握一些高级技巧，能让你的调试体验效率倍增，减少那些漫无目的的

console.log

一个我个人非常喜欢用的功能就是条件断点（Conditional Breakpoints）。想象一下，你的循环迭代了上千次，只有在

i === 999

i === 999

Logpoints（日志点）是我在不想修改代码，但又想快速查看某个变量值时的首选。它就像一个临时的

console.log

'当前值为：' + myVariable

监视（Watch）表达式也是一个强大的工具。在调试视图的“监视”面板中，你可以添加任何你想要观察的变量或表达式。当你单步执行代码时，这些表达式的值会实时更新。这比你每次都把鼠标悬停在变量上看值要高效得多，尤其当你需要同时观察多个相关变量时。

调试控制台（Debug Console）不仅仅是用来输出日志的。在程序暂停时，你可以在调试控制台里输入JavaScript代码，并执行它们。这意味着你可以实时地检查变量的值，甚至修改它们（如果环境允许），或者调用当前作用域内的函数。这对于快速验证某个假设，或者在不重新启动程序的情况下尝试修复某个小问题，非常有用。比如，你发现一个对象属性是

undefined

最后，别忘了异常断点（Exception Breakpoints）。在调试视图的“断点”面板中，你可以勾选“未捕获的异常”或“已捕获的异常”。这样，无论你的代码在哪里抛出异常，调试器都会立即暂停，让你有机会检查异常发生时的调用堆栈和变量状态。这比让程序崩溃然后看堆栈信息要直观得多，尤其是在你不知道异常会在哪里抛出时。

以上就是VSCode 怎样使用断点调试 TypeScript 代码 VSCode 断点调试 TypeScript 代码的方法​的详细内容，更多请关注php中文网其它相关文章！