如何使用GoogleChromeDevTools和VisualStudioCode调试JavaScript

介绍

学习调试是开发人员的一项基本技能，因为它可以让他们在开发过程中有效地修复错误。在 集成开发环境 (IDE) 之外使用 JavaScript 时，了解如何使用调试工具可能并不总是显而易见的。

本教程将介绍使用 Google Chrome DevTools 以及流行的文本编辑器 Visual Studio Code（VS Code）调试 JavaScript。

先决条件

要完成本教程，您将需要以下内容：

您的机器上安装了最新版本的 Google Chrome。
您的机器上安装了最新版本的 Visual Studio Code。
Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。

对于本教程，您可以将这些课程应用到您自己的一个可以在 Node 服务器上运行的 JavaScript 项目中，但如果您愿意，也可以选择使用示例应用程序来跟随。

第 1 步 — 创建示例应用程序（可选）

如果您没有 JavaScript 项目可跟进，您可以完成此步骤来创建 Quick Chat 项目。

你使用 Git 克隆 Design-and-Build-a-Chat-Application-with-Socket.io repo。或者您可以下载 zip 文件并解压缩内容。

注意：如果你的系统需要安装Git，请参考Git入门。

出于本教程的目的，您将使用 第 8 部分 中的代码。花点时间熟悉一下您希望应用程序如何工作。

首先导航到项目目录并进入 part-8 目录：

cd Design-and-Build-a-Chat-Application-with-Socket.io
cd part-8

接下来，为项目安装 npm 包：

npm install

然后，启动服务器：

npm start

如果您在 Chrome 中访问 127.0.0.1:3000，您应该会看到 用户名 的提示。提供用户名并单击 Chat! 按钮后，您将被定向到聊天应用程序并看到以下内容：

OutputUser joined the chat...

通过在窗口底部的输入中输入文本并单击发送按钮，您的消息将显示在聊天窗口中。

如果您打开一个新的浏览器选项卡并访问相同的 URL，您可以以其他用户身份登录并观察发送到两个浏览器选项卡中聊天窗口的聊天消息。这是此应用程序的预期功能。

介绍错误

现在，您将故意引入一个小错误，该错误在用户登录后无法注册用户身份。

在文本编辑器中打开 part-8/public/app.js 并找到 line 96：

第 8 部分/public/app.js

  //set the username and create logged in message
  username = usernameInput.value;

将此行更改为以下内容：

第 8 部分/public/app.js

  //set the username and create logged in message
  username = usernameInput.text; // added bug

刷新浏览器选项卡。登录并观察以下内容：

Outputundefined joined the chat...

应用程序通过引用 usernameInput.text 而不是 usernameInput.value 错误地获取了用户的用户名。我们将使用它来练习调试。

第 2 步 — 了解调试的基础知识

在开始调试应用程序之前，熟悉调试的工作原理会很有帮助。调试的想法是能够（有条件地）触发所谓的 breakpoints 来暂停代码的执行。这使您有机会通过执行检查变量等操作来查看应用程序的状态。您甚至可以更进一步，“观察”您选择的变量，这样每当您的应用程序暂停时，您就可以专门检查这些变量的值。

触发断点后，通常会有以下选项：

继续执行您的程序。
逐行浏览您的代码。
退出您所在的当前功能。
进入下一个函数调用。

您还可以查看调用堆栈。换句话说，当函数调用程序中的其他函数时，您可以检查这些函数调用的历史记录。

现在您已经了解了调试工作原理的基础知识，您可以开始调试您的应用程序了。

第 3 步 — 在 Google Chrome 中调试

要开始在 Chrome 中进行调试，请将 debugger 语句添加到您的应用程序。

如果您跟随示例应用程序，您可以将其添加到 loginBtn 单击事件处理程序：

第 8 部分/public/app.js

loginBtn.addEventListener('click', e => {
  debugger; // added debugger
  e.preventDefault();
  if (!usernameInput.value) {
    return console.log('Must supply a username');
  }

  //set the username and create logged in message
  username = usernameInput.text; // added bug
  sendMessage({ author: username, type: messageTypes.LOGIN });

  //show chat window and hide login
  loginWindow.classList.add('hidden');
  chatWindow.classList.remove('hidden');
});

到达此语句时，您的应用程序将暂停，调试工具将自动激活。您会注意到该应用程序将显示为灰色，表示它已停止。您还将看到 Chrome DevTools 中的 Sources 选项卡已弹出：

让我们分解我们所看到的。

来源

您可能会注意到的第一件事是您的代码的副本。这是浏览器已加载并作为您的应用程序运行的代码。您还可以看到 debugger 行以蓝色突出显示，让您知道这是您的应用程序已暂停的位置：

Chrome 让您能够查看此代码是有原因的。有了前面的代码，您现在可以设置断点。断点是程序中有意停止或暂停的地方。

要添加断点，请单击行号左侧的装订线或空白区域。当您这样做时，请注意 Chrome 现在将此断点添加到更下方的断点列表中。

范围

在 Scope 选项卡中，您可以检查应用程序中的变量。您会注意到有一个 Local 部分（断点所在函数的本地范围）、一个 Global 部分（全局范围）和一个 Script[X165X ] 部分。在 Script 部分，可以查看当前脚本范围内的变量：

这是您将花费大量调试时间的地方。这是写出许多 console.log() 语句的更有效的替代方法。

手表

除了在 Scope 选项卡中查看变量外，您还可以定义要专门研究的变量。通过在 Watch 选项卡中添加一个变量，每次遇到断点时，您都可以快速找到该变量的值（可能是 undefined，具体取决于您在代码中的位置） . 使用 add 图标 (+) 并输入要跟踪的变量的名称。

如果您跟随示例应用程序，您可以使用：

usernameInput

Step Functions、调用堆栈和断点列表

最后一部分将允许您查看断点列表、调用堆栈等。

如果您跟随示例应用程序，调用堆栈将包含为登录按钮 (loginBtn.addEventListener.e) 的事件处理程序列出的函数。列出此函数是因为它是迄今为止唯一被调用的函数。随着函数调用更多函数，该链将适当更新。

还要注意调试器顶部的箭头按钮。

这些对应于为继续执行代码或逐行或按函数单步执行代码所引用的函数。稍微测试一下这些按钮，以习惯您如何导航代码的执行。

最后，可以设置不同种类的断点。让我们看一下创建一个条件断点，它只有在满足特定条件时才会被触发。右键单击装订线并选择 添加条件断点...。

如果您跟随示例应用程序，您可以创建一个断点，以便用户在不输入用户名的情况下尝试登录。使用以下条件设置条件断点：

usernameInput.text === ''

在调试示例应用程序的情况下，如果在没有输入用户名的情况下按下登录按钮，将触发此断点。否则代码将继续正常执行。

请注意，这里没有介绍更多可用的断点选项。

第 4 步 — 在 VS Code 中调试

正如您目前所看到的，Chrome DevTools 提供了很好的体验来调试具有大量功能的应用程序。但是，Visual Studio Code 在许多方面都将匹配的调试功能更无缝地集成到您的环境中。

要开始在 VS Code 中调试，请安装 Debugger for Chrome extension：

让我们快速浏览一下侧边栏中的调试选项卡（默认情况下位于编辑器的左侧）。通过单击看起来像错误的图标打开调试选项卡：

打开此窗格后，您将看到与我们在 Chrome 中看到的类似的工具：变量、监视、调用堆栈和断点。

您在 Chrome DevTools 中获得的大部分功能都可以在 VS Code 中使用。

现在您已经看到了 Debug 选项卡，创建一个启动配置，告诉 VS Code 如何调试您的应用程序。 VS Code 将调试配置存储在名为 launch.json 的文件中，该文件位于名为 .vscode 的文件夹内。

要让 VS Code 为您创建此文件，您可以单击 自定义运行和调试中提到的链接，在窗格中创建一个 launch.json 文件 消息。您也可以通过导航菜单并选择 Run 然后选择 Add Configuration... 来完成此操作。然后你会选择Chrome。

您创建的特定配置将自动附加到定义端口的应用程序。

您可能需要更改此配置以正确指向应用程序的源代码。

如果您跟随示例应用程序，您应该将端口从 8080 更改为 3000。

示例应用程序是从 public 目录提供的，您应该更新 webRoot 以反映这一点。

为了调试示例应用程序，launch.json 文件应类似于：

第 8 部分/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/public"
    }
  ]
}

注意： 请记住，您的应用程序必须已经在本地某个端口上运行才能正常工作。

定义好配置后，您现在可以通过单击窗格顶部的绿色 play 按钮来启动调试会话。您还可以使用菜单（Run 然后 Start Debugging）和键盘快捷键。

您的应用程序将在 Chrome 窗口中弹出。

您会注意到在 VS Code 的后台弹出的调试菜单栏。使用此调试工具栏，您可以暂停、重新启动、继续，并使用步进函数来导航您的代码并与调试器交互。

连接调试后，您可以像在 Chrome 中那样在代码中设置断点。单击行号旁边的装订线。

如果您正在使用示例应用程序，请在与之前相同的位置创建一个断点，就在登录事件回调内部。

现在，当尝试在不输入用户名的情况下登录时，断点将触发并将上下文切换回 VS Code 以进行进一步调查。

从这里开始，我们在 Chrome 中讨论的功能直接映射到 VS Code。如果要添加条件断点，请在装订线中单击鼠标右键，然后选择 Add Conditional Breakpoint... 和某些条件。如果要监视变量，请单击以添加新变量，然后键入要监视的变量的名称。如果要探索变量，请转到 Variables 选项卡。

结论

在本教程中，您使用了 Chrome 和 Visual Studio Code 来调试您的应用程序。了解这两个选项的工作原理将使您能够采用最适合您的工作流程。

作为开发人员，下一步需要利用可用于您的编程语言的工具生态系统。调试是需要一些时间和精力才能开始的主题之一，但最终收益将超过成本。