介绍

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

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

先决条件

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

• 您的计算机上安装了最新版本的Google Chrome。
• 你的机器上安装了最新版本的Visual Studio Code。
• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。

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

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

如果您没有要遵循的 JavaScript 项目，则可以完成此步骤以创建Quick Chat项目。

您可以使用GIT中克隆的Design-and-Build-a-Chat-Application-with-Socket.io回购。或者，您可以下载 zip 文件并解压缩内容。

注意：如果您需要在系统上安装 Git，请参阅Git 入门。

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

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

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

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

npm install

然后，启动服务器：

npm start

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

Output
User joined the chat...

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

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

介绍错误

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

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

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

将此行更改为以下内容：

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

刷新浏览器选项卡。登录并注意以下事项：

Output
undefined joined the chat...

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

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

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

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

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

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

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

第 3 步 — 在 Google Chrome 中调试

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

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

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部分。在脚本部分，您可以查看当前脚本范围内的变量：

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

手表

除了在“范围”选项卡中查看变量之外，您还可以定义要专门查看的变量。通过向Watch选项卡添加变量，每次遇到断点时，您都​​可以快速找到该变量的值（这可能undefined取决于您在代码中的位置）。使用添加图标 (+) 并输入要跟踪的变量的名称。

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

usernameInput

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

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

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

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

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

最后，可以设置不同种类的断点。让我们来看看创建一个条件断点，它只有在满足特定条件时才会被触发。右键单击该排水沟，然后选择添加条件断点…。

如果您跟随示例应用程序，您可以为用户尝试登录而不输入用户名时创建断点。使用以下条件设置条件断点：

usernameInput.text === ''

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

请注意，这里还没有涵盖更多可用的断点选项。

第 4 步 – 在 VS Code 中调试

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

要开始在 VS Code 中调试，请安装Debugger for Chrome 扩展程序：

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

打开此窗格后，您将看到与我们在 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文件应该类似于：

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

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

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

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

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

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

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

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

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

结论

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

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