停止 Console.Logging！用 Chrome 调试 JavaScript

如果你在调试时使用 console.log()，那你就错了。其实有一个更简单的方法，就在你的浏览器里。

听起来很熟悉？

根据 StackOverflow 2019 年的调查，JavaScript 是最受欢迎的编程语言。如果您使用 JavaScript 进行开发，那么您很可能遇到过需要修复一两个 bug 的情况。

“没问题！”你对着小黄鸭说，让我们重现这个bug并用 修复它console.log()。现在，如果我告诉你这不是最佳实践呢？

在本文的最后，我附上了 TL;DR 摘要。

控制台日志记录有效，但还有更好的方法。

您无需在每次想要调试时都使用 console.logging 并重新启动，而是可以使用 Chrome DevTools（右键单击 + 检查）。

也许您已经在使用它来查看和修改 HTML/CSS 元素、监控控制台日志以及测量网络性能。但您是否知道 Chrome 内置了强大的调试功能，您可以：

• 查看源代码
• 设置断点
• 踏入、跨过和走出

本文的其余部分是关于如何将 Chrome 的调试功能与 Angular 结合使用的分步指南 - 但您可以随意在任何 JavaScript 前端框架上跟随您现有的项目。

设置您的环境。

注意：如果您已经有现有项目，请跳至下一部分。

在本节中，我们将使用其官方指南快速设置一个 Angular 应用程序。

先决条件
Node.js 版本 10.9.0 或更高版本。

步骤 1.安装 Angular CLI
npm install -g @angular/cli

步骤 2：创建工作区和初始应用程序
ng new my-app

步骤 3：运行应用程序
cd my-app
ng serve --open

这将打开浏览器并访问 URL localhost:4200

创建错误🐛

为了演示的目的，让我们创建一个错误然后对其进行调试；）。

打开您最喜欢的文本编辑器并导航至src/app/app.component.ts
用以下内容替换行并保存。

再看看浏览器，你应该会看到一个 bug！ [object Object] 只是将 POJO（普通的 JavaScript 对象）转换为字符串时的默认返回值。这不是我们想要的结果——所以让我们修复它！

调试模式🔴

1.使用 Chrome检查源代码，

right click > inspect > sources > cmd + p > search file

如果操作正确，这将带您进入存在错误的源代码。

2. 设置断点
设置断点对于有效调试至关重要。断点是程序中故意设置的暂停点，允许开发人员检查应用程序当时的内部状态。您可以使用它来查看变量并执行其他调试功能。

断点是程序中的有意暂停，允许开发人员检查应用程序当时的内部状态。

要设置断点，请点击您希望程序暂停的行号。在下面的示例中，我们将断点设置在 9 行。

刷新浏览器，您应该会看到“在调试器中暂停”。

将鼠标悬停在变量 author 上——它应该是未定义的。未定义的原因是程序还没有执行到这一行。它已经执行完了第 8 行，即将执行到第 9 行。

按▶️继续执行。

3. 进入、跳过、跳出。
这三个基本步骤是调试的基础。

• 步入是指调试器进入或进入函数内部
• 跳过是指调试器跳到下一行
• 跳出是指调试器跳出当前函数

再次刷新浏览器，调试器在断点处暂停后，使用右侧面板单步执行该函数。这将带您进入该函数getAuthor()。将鼠标悬停在 obj 上，您将看到 undefined，因为我们尚未实际执行它。单步执行该行，然后再次将鼠标悬停在 obj 上。这次，您应该看到一个 POJO。单步执行返回到调用方，现在 author 不再是 undefined 了。

太好了——我们现在知道 author 对象有值了。该如何修复它呢？

4. 修复错误
将第 10 行替换为以下内容并保存。my
title =-app by ${this.author.name};

5. 停用断点

点击“停用断点”。它会变为蓝色，表示已启用。设置完成后，DevTools 会忽略你设置的任何断点。
刷新页面。

固定的！

结束语

恭喜！您现在知道如何使用 Chrome DevTools 进行高效调试了。虽然它console.log()在编程中确实有用，但它仅限于修改源代码、重启程序和不间断执行。Chrome 内置的调试工具解决了这些缺点，并让您能够在特定时间点停止、检查和调查程序中发生的事情。

TL;DR

打开检查器，单击“源”选项卡，CMD + P查看源代码并设置断点。

欲了解更多信息，请查看Google关于此主题的博客。

感谢阅读！本文最初发表于Faun。