作为一名前端工程师，我们经常需要使用 Debug 技巧来快速定位和修复代码中的问题。在使用 TypeScript 开发 Node.js 应用程序时，我们同样需要掌握一些 Debug 技巧来提高开发效率和代码质量。本文将介绍一些在 Node.js 中使用 TypeScript 的 Debug 技巧，帮助你更好地理解和调试 TypeScript 代码。
怎样调试 TypeScript 代码
在 Node.js 中使用 TypeScript 进行开发时，我们需要先将 TypeScript 代码编译成 JavaScript 代码，然后再运行 JavaScript 代码。这里介绍两种方法来调试 TypeScript 代码。
方法一：使用 TypeScript 编译器生成调试信息
在使用 TypeScript 编译器编译 TypeScript 代码时，我们可以使用 -s 或 --sourceMap 选项来生成调试信息。编译器生成的调试信息是一个 .map 文件，其中保存了 TypeScript 代码和 JavaScript 代码之间的映射关系。在调试 TypeScript 代码时，我们可以使用以下命令来生成调试信息：
tsc -s app.ts
这样，编译器就会生成一个名为 app.js.map 的文件，我们可以在调试器中加载这个文件来进行调试。
方法二：使用 ts-node 运行 TypeScript 代码
另一种调试 TypeScript 代码的方法是使用 ts-node 这个工具来运行 TypeScript 代码。ts-node 是一个在运行时将 TypeScript 代码转换为 JavaScript 代码的工具，它会自动生成调试信息，方便我们进行调试。在 Node.js 中使用 ts-node 运行 TypeScript 代码时，我们可以在命令行中输入以下命令：
ts-node app.ts
这样，ts-node 就会将 app.ts 转换为 app.js 文件并运行它。我们可以直接在调试器中对 app.ts 文件进行调试。
在代码中添加调试语句
在 TypeScript 代码中添加调试语句是一种常用的 Debug 技巧。下面是几种常用的调试语句。
console.log
console.log 是一种常见的调试语句，可以输出变量的值和调试信息。在 TypeScript 中使用 console.log 很简单，只需要像 JavaScript 一样调用即可：
const name = '张三';
console.log('我的名字是：', name);debugger
debugger 是一种强大的调试语句，可以在代码执行到该语句时暂停程序的执行，并进入调试器。在 TypeScript 中使用 debugger 也很简单，只需要像 JavaScript 一样在代码中添加即可：
function add(x: number, y: number): number {
debugger;
return x + y;
}当程序执行到 debugger 语句时，会自动进入调试器，我们就可以在调试器中查看和修改变量的值了。
console.trace
console.trace 可以输出当前函数调用栈的信息，方便我们查找问题。在 TypeScript 中使用 console.trace 也很简单：
-- -------------------- ---- ------- -------- ----- - ----------------------- - -------- ----- - ------ - ------
当程序执行到 console.trace 语句时，会输出当前函数调用栈的信息，如下所示：
-- -------------------- ---- -------
-----
-- --- -------------
-- --- ------------
-- ------------------ ------------
-- --------------- ---------------------------------------
-- ----------------- ----------------------------------------------------------
-- ---------------------- ---------------------------------------
-- ------------------------------------ --- ---- ----------------------------------------------------------
-- ----------- ---------------------------------------
-- ------------- ---------------------------------------
-- --------------------- --------------------------------------在 VS Code 中调试 TypeScript 代码
VS Code 是一款强大的代码编辑器，它集成了调试器可以方便地调试 TypeScript 代码。在 VS Code 中调试 TypeScript 代码需要进行如下几个步骤。
步骤一：编辑调试配置文件
在 VS Code 中编辑调试配置文件（.vscode/launch.json），指定需要调试的 TypeScript 文件和调试器类型（Node.js）。配置文件如下所示：
-- -------------------- ---- -------
-
---------- --------
----------------- -
-
------- --- ---------- ----
------- -------
---------- ---------
---------- ----------------------------
----------- -
---------------------------------
--
------------- -----
------ --------------------
-
-
-其中 "program": "${workspaceFolder}/app.ts" 指定了需要调试的 TypeScript 文件（假设文件名为 app.ts），"outFiles": ["${workspaceFolder}/dist/**/*.js"] 指定了编译输出的 JavaScript 代码所在的目录，"sourceMaps": true 指定了是否需要使用生成的调试信息。
步骤二：在代码中添加断点
在需要断点的代码行前面单击鼠标左键或按下 F9 键即可添加断点。
步骤三：启动调试器
按下 F5 键或单击左侧调试栏中的 调试 TypeScript 代码 按钮启动调试器。当程序执行到断点时，调试器会自动暂停程序的执行，我们就可以在调试器中查看和修改变量的值了。
总结
本文介绍了在 Node.js 中调试 TypeScript 代码的两种方法（使用编译器生成调试信息和使用 ts-node 运行 TypeScript 代码）、在代码中添加调试语句的常见方法（console.log、debugger 和 console.trace）、在 VS Code 中调试 TypeScript 代码的步骤。希望对读者对 TypeScript 开发和 Debug 技巧有所帮助。
示例代码：（这里提供一份简单的示例代码，用于说明在 Node.js 中的 TypeScript 调试技巧）
function add(x: number, y: number): number {
debugger;
console.log('x + y =', x + y);
return x + y;
}
add(1, 2);最终效果截图：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472b4f5968c7c53b004fc80