介绍

学习调试是开发人员必不可少的技能,因为它允许他们在开发过程中有效地修复错误。

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

前提条件

要完成本教程,您将需要以下内容:

• 最新版本的 Google Chrome 安裝在您的電腦上。 * 最新版本的 Visual Studio Code 安裝在您的電腦上。 * Node.js 安裝在本地,您可以按照 如何安裝 Node.js 和創建本地開發環境 進行。

对于本教程,您可以将教程应用到您自己的JavaScript项目中,这些项目可以在Node服务器上运行,但如果您喜欢的话,还可以使用样本应用程序来跟进。

步骤 1 — 创建样本应用程序(可选)

如果你没有一个JavaScript项目要跟随,你可以完成这个步骤来创建一个快速聊天项目。

您可以使用 Git 到 [https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository] 或 Design-and-Build-a-Chat-Application-with-Socket.io repo。

如果您需要在您的系统上安装 Git,请参阅 Getting Started with Git。

对于本教程的目的,你将使用从 Part 8 的代码. 花一会儿来熟悉如何你希望应用程序的工作。

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

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

接下来,安装该项目的 npm 包:

1npm install

然后,开始服务器:

1npm start

如果您在Chrome中访问了127.0.0.1:3000,则应该看到一个提示 用户名 。 输入用户名并点击** Chat!** 按钮后,您将被引导到聊天应用程序,并看到以下内容:

1[secondary_label Output]
2User joined the chat...

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

如果您打开一个新的浏览器卡并访问相同的URL,您可以作为另一个用户登录,并观察到在浏览器的两个卡中发送到聊天窗口的聊天消息。

引入bug

现在,你将 _ intentionally_ 引入一个小小的错误,在他们登录后无法注册用户。

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

1[label part-8/public/app.js]
2  //set the username and create logged in message
3  username = usernameInput.value;

将这条线改为以下:

1[label part-8/public/app.js]
2  //set the username and create logged in message
3  username = usernameInput.text; // added bug

刷新您的浏览器卡. 登录并观察如下:

1[secondary_label Output]
2undefined joined the chat...

该应用程序通过引用usernameInput.text而不是usernameInput.value来错误地捕捉用户的用户名。

步骤2 - 了解调试的基本知识

在您开始调试您的应用程序之前, 熟悉调试是如何工作的很有帮助 。 调试的想法是能够(有条件)触发所谓的_breakpoints_暂停执行您的代码. 这使得您有机会通过检查变量等行动来查看您的应用状态. 您甚至可以更进一步, 并观察您所选择的 监视 变量, 这样当您的应用程序被暂停时, 您就可以检查这些变量的值 .

触发破裂点后,您通常会有以下选项:

• 继续执行你的程序. * 步骤通过你的代码行一行. * 步骤离开当前的函数,你在。

换句话说,当函数在程序中呼叫其他函数时,您可以检查这些函数呼叫的历史。

现在你已经涵盖了调试如何工作的基本知识,你已经准备好开始调试你的应用程序。

步骤 3 – 在 Google Chrome 中调试

要开始在Chrome中调试,请在您的应用程序中添加一个 debugger声明。

如果您正在跟踪样本应用程序,您可以将其添加到loginBtn点击事件处理器中:

 1[label part-8/public/app.js]
 2loginBtn.addEventListener('click', e => {
 3  debugger; // added debugger
 4  e.preventDefault();
 5  if (!usernameInput.value) {
 6    return console.log('Must supply a username');
 7  }
 8
 9  //set the username and create logged in message
10  username = usernameInput.text; // added bug
11  sendMessage({ author: username, type: messageTypes.LOGIN });
12
13  //show chat window and hide login
14  loginWindow.classList.add('hidden');
15  chatWindow.classList.remove('hidden');
16});

当达到此语句时,您的应用程序将暂停并自动启用调试工具.您将注意到该应用程序将灰色,表示已停止。

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

◎ 来源

您可能注意到的第一件事是看起来是您的代码的副本。这是浏览器加载的代码,并作为您的应用程序运行。您还可以看到‘调试器’行以蓝色突出,以便您知道这是您的应用程序被暂停的地方:

Chrome 允许您出于某种原因查看此代码。在您面前的代码下,您现在可以设置 breakpoint。

若要添加分割点,请点击分割点,或空格,在行数字的左侧. 当您这样做时,请注意 Chrome 现在将此分割点添加到分割点列表的下方。

范围

在 Scope 选项卡中,您可以检查应用程序中的变量,您会注意到有一个 Local 部分(分割点所在的函数的本地范围),一个** Global** 部分(全球范围)和一个** Script** 部分。

这里将花费大量的调试时间,这是写出许多console.log()陈述的更有效的替代品。

观看

除了在)。

如果您正在跟随样本应用程序,您可以使用:

1usernameInput

步骤函数,调用堆栈和破解点列表

最后的部分将允许您查看突破点列表,调用堆栈等。

如果您正在跟踪样本应用程序,则调用堆栈将包含登录按钮的事件处理器列出的函数(‘loginBtn.addEventListener.e’)。

另外,请注意调试器顶部的箭头按钮。

这些函数与所参照的函数相匹配,以便继续执行您的代码或通过它行后行或函数测试这些按钮,稍微习惯于如何导航您的代码的执行。

最后,可以设置不同类型的破裂点。让我们看看创建一个条件破裂点,如果满足一定条件,它只会被触发。

如果您正在跟踪样本应用程序,您可以创建一个分割点,当用户尝试登录而不输入用户名时。

1usernameInput.text === ''

在调试样本应用程序的情况下,如果您按下登录按钮而不输入用户名,则会触发此分割点,否则代码将继续正常执行。

请注意,还有更多的分割点选项可用,这些选项在此未涵盖。

步骤 4 — 在 VS 代码中调试

正如你所看到的,Chrome DevTools提供了一个很好的体验来调试你的应用程序,有很多功能. 然而,Visual Studio Code在许多方面都有匹配调试功能,更顺畅地集成到你的环境中。

要开始调试,请安装 Debugger for Chrome 扩展:

让我们快速看看侧面栏(默认情况下是编辑器的左侧)中的调试选项卡。

通过打开此窗格,您将看到类似于我们在Chrome中看到的工具:变量,时钟,调用堆栈和突破点。

您在Chrome DevTools中获得的大部分功能就在VS Code中。

现在你已经看到调试卡,创建一个启动配置,告诉VS Code如何调试你的应用程序.VS Code将调试配置存储在名为launch.json的文件中,名为vscode的文件夹中。

要让VS Code为您创建此文件,您可以点击 To customize Run and Debug中提到的链接,在窗口中创建一个 launch.json 文件 消息。

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

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

如果您正在跟随样本应用程序,您应该将端口从8080更改为3000。

样本应用程序从公共目录中提供,您应该更新webRoot以反映这一点。

为了调试样本应用程序,launch.json文件应该看起来像:

 1[label part-8/.vscode/launch.json]
 2{
 3  "version": "0.2.0",
 4  "configurations": [
 5    {
 6      "type": "chrome",
 7      "request": "launch",
 8      "name": "Launch Chrome",
 9      "url": "http://localhost:3000",
10      "webRoot": "${workspaceFolder}/public"
11    }
12  ]
13}

注意:请记住,您的应用程序必须已经在某个端口本地运行,以便工作。

随着配置定义,您现在可以通过点击窗格顶部的绿色 播放 按钮开始调试会话,您还可以使用菜单(** 运行** ,然后** 启动调试** )和键盘快捷键。

您的应用将出现在 Chrome 窗口中。

您会注意到调试菜单栏在VS Code内部的背景中出现. 使用此调试工具栏,您可以暂停,重新启动,继续,并使用步骤函数导航您的代码并与调试器进行交互。

通过调试连接,您可以像在Chrome中一样在代码中设置一个分割点。

如果您正在跟踪样本应用程序,请在与之前相同的位置创建一个分断点,就在登录事件回调中。

现在,当尝试在不输入用户名的情况下登录时,破解点将触发并将文本转换回VS代码以进行进一步调查。

从这里,我们在Chrome中讨论的功能将直接转移到VS Code中。如果您想添加条件分割点,请右键单击洞穴,然后选择 添加条件分割点... ,如果您想要观看变量,请单击添加新变量,然后键入要观看的变量名称。

结论

在本教程中,您使用了Chrome和Visual Studio代码来调试您的应用程序. 知道这两个选项如何工作将允许您采用最适合您的工作流程。

作为一名开发人员,采取下一步的步骤包括利用可用于您的编程语言的工具生态系统. 调试是需要一些时间和努力的主题之一,但最终的好处将超过成本。