使用 Visual Studio Code 调试 Express 应用
已完成
15 分钟
Visual Studio Code 内置了对 Node.js 运行时的调试支持，可以调试 JavaScript、TypeScript 和其他许多转译为 JavaScript 的语言。
IntelliSense
内置的 IntelliSense 功能提供了代码完成、参数信息、成员列表等。 例如，可以在 Node app.js 文件中请求 HTTP，并在键入的同时获取针对 http 类的完整 IntelliSense。
在 Visual Studio Code 中，打开上一单元中的 HelloWorld Express 项目(如果已关闭的话)。 在状态栏中查找“WSL:Ubuntu”，确保 Visual Studio Code 连接到 WSL。 如果 Visual Studio Code 在 Windows 上运行，则可以运行“Remote-WSL:Reopen Folder in WSL”以切换到 WSL。
Visual Studio Code 将记住上一会话的状态，并在 WSL 中重新打开你使用的最后一个文件夹(如果你此前曾在使用它)。 若要在 Windows 中启动新的实例，可以通过“文件” > “关闭远程连接”以为空编辑器关闭远程连接，或者运行Remote-WSL: 以在 Windows 中打开当前项目。
打开 Express 项目中的 app.js 文件，将鼠标悬停在行 var app = express(); 中的“express”一词之上。 IntelliSense 弹出窗口将指出此函数可创建 Express 应用程序。
使用 launch.json 文件配置项目以进行调试
若要开始调试 Express 应用，首先需要创建名为 launch.json 的调试器配置文件。 当你打开目录时，Visual Studio Code 将查找多个文件。 这些文件用于自定义 Visual Studio Code 的行为方式。 Launch.json 是其中一个文件，用于自定义调试器的打开方式。
选择 Visual Studio Code 活动栏(左侧)中的“调试”图标，然后选择“调试”视图顶部的“配置”图标(齿轮)。 (在“无配置”旁边，应有一个红点，指示尚未创建任何配置。)这会在项目根目录中的 .vscode 文件夹内创建 launch.json 文件。 (此文件可能位于 ./HelloWorld/.vscode/launch.json 中。)
若要启动调试，请选择“启动调试”，或按 F5。 打开“调试控制台”窗口 (Ctrl+Shift+Y)，以查看调试信息。 此窗口现在应报告已附加调试器。
停止调试。 (按 Shift+F5 或菜单中的“停止”按钮。)
接下来，输入一些代码，以尝试进行调试测试。
在项目的 routes 文件夹中，打开 index.js 文件。 可以看到，index.js 文件需要 Express 模块，设置路由器，然后指示路由器对 Express 应用的主页(索引)执行 get 操作，并将它命名为“Express”。
定义变量 platform，并向它提供一组值。 复制以下代码并将其粘贴到定义路由器和使用路由器的行之间(如屏幕截图中所示)。
var platform = ["Linux", "Windows", "Unix/MacOS"];
使用以下代码更改路由器显示的标题。 我们希望它使用数组中的变量 1：
router.get('/', function(req, res, next) {
res.render('index', { title: platform[1] });
});
通过添加下面的代码，使用控制台日志 platform 函数确认正在运行的平台：
console.log("You're running on: ", process.platform);
保存更改，然后在终端窗口中输入 npm start。 这会启动 Express 应用。 打开浏览器，转到 localhost:3000，以查看正在运行的应用的主页。
糟糕！ 可以看到，控制台日志指示我们正在运行 Linux，但页面上显示正在 Windows 上运行代码。 接下来将对此进行调试，看看出了什么问题！
按 Ctrl+C，以停止 npm 在终端运行应用。
为了更好地理解此问题，我们将添加另一个控制台日志，以列出 platform 变量数组中的三个选项：
console.log("Your platform is either: ", platform[1], platform[2], platform[3]);
在定义 platform 变量之后，但在路由器获取主页之前，添加 console.log。 在此处放置断点，以便让脚本在主页还没有呈现时停止。 可以通过按 F9 键来添加断点。 将会看到已添加断点的行旁边的红点。
运行调试器 (F5)。 将看到“调试控制台”窗口指示 platform 数组包含 Windows、Unix/MacOS、未定义。
找到 bug 了！ JavaScript 从 0 开始为数组编号。 假设数组列表中的项 1 是 Linux。 此 bug 解释了为什么 Web 应用标题会改列为“Windows”。
将标题呈现代码更改为以下代码：
res.render('index', { title: platform[0] });
使用 npm start 从终端重新运行应用。 打开浏览器，然后转到 localhost:3000。 (如果浏览器还在打开，则对其进行刷新。)现在应看到 Web 应用的标题更新为“Linux”。 好哇！
你已成功在 Windows 计算机上使用 Visual Studio Code 调试在 Linux Ubuntu 发行版本中运行的 Node.js Express 应用！