在前端开发中，TypeScript 和 Node.js 一直是非常重要的技术。同时，我们也经常需要进行调试来定位代码问题。那么，在使用 TypeScript 开发 Node.js 应用时，我们应该如何进行调试呢？本文将会从以下几个方面进行详细介绍和指导。
环境准备
在进行 TypeScript 和 Node.js 的程序调试前，我们需要先做好以下几个环境准备：
- 安装 Node.js 和 npm
- 安装 TypeScript
- 安装调试工具（如 VS Code）
使用 VS Code 调试
VS Code 是一款非常流行的编辑器，也被广泛应用于 TypeScript 和 Node.js 的开发，此处以 VS Code 为例进行介绍。为了在 VS Code 上进行调试，我们可以使用以下步骤：
- 使用 VS Code 从源代码控制工具如 Git 中 Clone 代码到本地项目。
- 安装 VS Code 中的
Debugger for Chrome插件。 - 修改项目的
launch.json文件，配置调试选项，如下所示：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Node.js",
"type": "node",
"request": "launch",
"args": ["${workspaceRoot}/app.js"],
"runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "openOnSessionStart",
"envFile": "${workspaceRoot}/.env",
}
]
}在该 launch.json 文件中，我们需要配置以下内容：
name：该调试会话的名称。type：指定所需的 Debugger（在这里我们使用node）。request：指定 Debugger 请求的类型。通常我们使用'launch'，这表示启动应用程序并进入调试模式。args：指定应用程序文件与文件的路径。在这里，我们需要指定 TypeScript 文件的路径，同时我们也可以配置一些选项。runtimeArgs：指定启动 Node.js 时的运行时参数（例如，--no-deprecation）。sourceMaps：如果为true，则该文件与源文件之间的行数映射将从调试器过程中受益。这通常是为了查看源代码而不是编译后的 JavaScript 代码。cwd：指定当前工作目录。protocol：指定 Debugger 支持的协议类型。通常，我们将其设置为inspector。console：指定调试信息输出的目标。这可以是"console"或"integratedTerminal"。internalConsoleOptions：指定是否应自动展开调试器内部控制台。envFile：指定环境变量文件的路径。
使用 Chrome 和 Chrome DevTools 调试
在打开 VS Code 调试之前，我们通过 Chrome 和 Chrome DevTools 调试来确定一些必要的信息。具体地说，我们需要检查以下几个步骤：
- 在 Chrome 中打开该应用程序，并打开 DevTools。在 DevTools 中，单击“Sources”（已经选择的话）。
- 在 Sources 标签下，搜索
app.js。我们应该能够看到一个同名的 TypeScript 文件。 - 在该 TypeScript 文件中，打开断点，刷新页面，看调试器是否可能停在该断点上。如果没有，请在 TypeScript 文件中添加断点并执行相同操作。
- 一旦我们的断点在这个 TypeScript 文件中生效，可以在 VS Code 中启动版本控制工具内置的 Debug Chrome 插件进行断点调试。
- 这时候可以去 DevTools 的 Sources 标签中，我们应该能够在 Application tab 下找到一个 "local file system" 选项。代码会自动映射到这个选框中。
总结
在这篇文章中，我们介绍了使用 TypeScript 开发 Node.js 应用时如何进行调试，以及如何使用 VS Code 和 Chrome DevTools 进行调试。通过这篇文章的学习和实践，你将能够更好地定位问题和调试代码。
示例代码
// app.ts
import * as express from "express";
const app = express();
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`App listening on port ${port}`);
});// package.json
{
"name": "TypeScriptApp",
"version": "1.0.0",
"main": "dist/app.js",
"license": "MIT",
"scripts": {
"start": "node dist/app.js",
"watch": "tsc -w",
"debug": "nodemon --inspect-brk dist/app.js",
"build": "tsc -p .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "^4.16.4"
},
"devDependencies": {
"@types/express": "^4.16.0",
"nodemon": "^1.18.3",
"ts-node": "^7.0.1",
"typescript": "^3.3.3"
}
}来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659686dbeb4cecbf2da566f4