JavaScript 调试得心应手！Console.log() DevTools VS Code Node.js 最佳调试方式？有何见解？

2025-06-04

JavaScript 调试正确完成！

控制台.log()

开发者工具

VS 代码

Node.js

最好的调试方法？

有什么意见吗？

这篇文章取自我的博客，因此请务必查看以获取更多最新内容。

我想每个人一生中都遇到过Bug——不是自然产生的，而是真正的 Bug——代码产生的。真的，即使是最有经验的程序员也需要警惕 Bug。这些 Bug 很容易出现，而且很棘手，如果你的代码库中从未出现过，那你就算幸运了。话虽如此，高级程序员的 Bug 比初学者少也是很自然的。你知道为什么吗？因为他们知道如何预防！

调试过程是编程的本质，尤其是在 JavaScript 这样的动态类型语言中。因此，在这篇文章中，我不会花 5 分钟时间说服你使用 TypeScript，而是会探讨一些可行的调试技巧。但请记住，遗憾的是，这些技巧并不能从一开始就帮助你减少 bug 的发生，而只能改进调试/修复现有 bug 的过程。那么，让我们开始吧！

控制台.log()

每个 JS 开发者听到“调试”这个词时，首先想到的很可能是console.log()。试想一下，有多少次，当一个 bug 出现时，你只是console.log()在代码中放入一系列 ，然后分析输出？嗯，我认为这是 JS 调试中最流行的技术，也许是很多程序员唯一知道和使用的技术。你猜怎么着？这其实很好。因为它console.log()易于使用和理解，可以放在代码的任何位置，而且——如果你在支持 HMR 的环境中开发项目——它使你能够随时随地顺利地调试问题。另一个促成这一点的因素是console.log()，除了十几种其他方法之外，只有一种方法，它们共同构成了多样化的Console API，涵盖了程序员的许多潜在需求（我在之前的一篇文章中已经详细介绍了所有这些需求）。

console.log("bug!");
console.table(["bug!", "bug!", "bug!"]);
console.assert("bug!");
console.trace("bug!");
// ...
Enter fullscreen mode Exit fullscreen mode

但是，由于需要不断干扰代码库，可能需要重新编译，最糟糕的情况是不支持 HMR，再加上一些小问题，我们不得不努力寻找更好的代码调试方法。那么，如何在没有 的情况下进行调试呢console.log()？

开发者工具

事实证明，似乎确实有一个更好的解决方案——借助DevTools。你肯定经常使用这些工具，但很可能只是用来查看日志或稍微修改一下 HTML 或 CSS。你可能知道这套工具的功能远不止这些，对吧？但是，我想谈谈所谓的“断点” ——另一种流行的调试技术。

在本文中，我将使用 Google Chrome，因为您几乎有 80% 的可能性也在使用它。不过，在其他浏览器中，该过程至少应该看起来有些类似。现在，让我们按F12 键进入 DevTools。在那里，转到“源”面板。在这里，如果您尚未更改默认布局，您应该会看到文件导航器、代码编辑器、底部的控制台以及调试窗格，这是我们的主要焦点。

现在，如果您对“断点”一词一无所知，这里有一个简单的解释。它是代码中的一个点，您可以在此处停止其执行（“中断”）并进行分析和调试。简单，但功能强大！让我们来看看……

首先，我们需要选择断点。我们可以在代码编辑器窗格中选择要停止执行的行号来设置断点。您也可以使用调试窗格本身在选定的事件监听器上设置断点，并打开或关闭其中任何一个。这是一个非常简单且轻松的过程。

要开始使用断点，您必须重新执行代码，通常只需刷新页面即可。完成后，所有断点将保留并生效。当到达指定的代码行 (LOC) 时，执行过程将停止。

从那里你可以做各种各样的事情。你可以检查当前的调用堆栈（所有需要执行才能到达当前代码行的函数和内容），运行自定义表达式，检查当前作用域内所有可用的值（无论是本地、全局还是其他），甚至可以在任何线程上执行所有这些操作（使用 Web Workers 时）。你必须承认——这绝对超出了console.log()我们的能力范围。

控制和遍历断点也非常简单。您只需使用调试窗格顶部的控制栏，其中包含几个按钮。在这里，您可以遍历断点、启动和暂停代码执行，甚至可以逐个表达式地检查代码。每个按钮都配有一个信息丰富的图标和工具提示，让您始终了解该使用哪个按钮。

VS 代码

所以，我想我们都同意 DevTools 和断点很酷。但是，如果我们想直接从我们最喜爱、最流行的代码编辑器VS Code进行调试呢？嗯，猜猜怎么着？——这也很容易！

首先，我们需要安装一个名为Debugger for Chrome 的扩展程序。这样，我们就可以借助 Chrome 浏览器正确地调试 JS 应用。

安装扩展后，我们现在需要进入编辑器内的调试面板。在那里，我们会看到一个非常简洁的用户界面，它提供的功能与 DevTools 基本相同，只是包略有不同。

然后，我们必须创建调试配置。为此，请使用齿轮图标并选择 Chrome 环境。一个新的launch.json文件将被放置在.vscode目录中。在其中，我们可以指定不同调试配置的数量。正如生成文件中的注释所示 - 让自动完成功能作为您的指南。话虽如此，在这里，我们将创建一个小巧但方便使用的配置。

假设我们已经start设置好了 NPM 脚本并准备就绪。我们有一个非常标准的、支持 HMR 的环境，可以在 上为我们的应用提供服务localhost。查看相应的配置文件：

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Chrome",
            "preLaunchTask": "npm: start",
            "url": "http://localhost:4000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

在这里，我们基本上是npm start在运行调试器之前执行给定的脚本（注意语法），稍后我们将在本地主机端口 4000 上运行该脚本。配置过程实际上就是这么简单！

要运行调试器，您需要先选择断点。这次可以在编辑器中完成，只需点击行号旁边的 即可。之后，只需选择正确的配置，点击“开始”按钮，新的 Chrome 窗口就会打开。从现在开始，您可以从打开的窗口的 DevTools 或 VS Code 本身控制代码执行和调试过程！请记住，为了在热重载后进行调试，您需要先重新加载调试器。

现在，与标准 DevTools 相比，通过 VS Code 使用调试器可以获得一些额外的选项。考虑到preLaunchTask我们之前使用过的 NPM 脚本和属性，这一点尤其重要。利用这些，您可以轻松地预先配置和自定义调试过程。就我而言，我做的最有用的事情是TypeScript编译。如果您想在 VS Code 调试器中使用 TypeScript，请不要忘记在tsconfig.jsonsourceMap中设置该属性。这将极大地改善您的调试体验！true

Node.js

到目前为止，我们几乎涵盖了日常 Web 应用调试中可能用到的所有内容。但是，流行的Node.js运行时以及使用它的代码呢？该如何调试这类东西呢？

调试 Node.js 应用可能比你想象的要简单。比如，你不需要处理整个浏览器！但是，我们假设你现在并不想调试，而是想使用标准DevTools提供的美观、可扩展且交互式的控制台日志。信不信由你，如果你使用console.log()类似对象之类的复杂大型结构，那么在终端中操作时，情况很快就会变得很糟糕。

好消息是，从现在的很多 Node.js 版本开始，您实际上可以传递--inspect标志，并且几乎可以使用 DevTools 作为控制台输出。

node --inspect main.js
Enter fullscreen mode Exit fullscreen mode

只需在浏览器中转到about:inspect，您就会看到可供调试的远程目标。

除非你的应用在执行完所有代码后没有立即关闭。如果是这种情况，请在代码中添加此代码行，以确保程序不会在执行结束后立即退出。

process.stdin.resume();
Enter fullscreen mode Exit fullscreen mode

当然，这种技术只能让你的日志看起来更美观，但不一定能以任何形式或方式进行调试。为此，我们需要回到 VS Code，看看我们能做些什么！

事实证明，VS Code预装了Node.js 调试器，这正是我们要使用的。只需在configurations数组中添加另一个配置对象就可以了……

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Node.js",
            "program": "${workspaceFolder}/main.js"
        },
    ]
}
Enter fullscreen mode Exit fullscreen mode

所以，正如你所见，type我们的配置项与 不同，并且有一个指向main.js"node"文件的新属性。从那里，你可以运行调试器并执行上一个示例中可以执行的所有操作。只是这次没有打开外部浏览器窗口，你必须处理 VS Code 提供的功能……除非你将其与该技术结合使用。program--inspect

最好的调试方法？

我们已经探索了在 Web 开发人员最常用的两种环境（浏览器和代码编辑器）中调试代码的最基本、最常用的方法——通过控制台 API 或使用断点。但是，你究竟应该如何调试代码呢？

这两种调试方式基本上就够了。其他功能只是在它们的基础上进行改进。这就是为什么断点等功能会根据你的环境而有所不同。话虽如此，断点几乎总是更好的选择。它们不会直接干扰你的代码库，并且只需简单的选择就能提供更多信息。当然，控制台 API 仍然很有用，尤其是在处理一些较小的代码片段或进行一些“复杂”的操作时。

如果这个技巧对你不起作用，我还有一个更好的！不如……从一开始就不犯bug？是的，这有点不现实。但是，通过遵循良好的编码实践，不断测试代码并确保其总体高质量标准，你至少可以最大限度地减少需要调试bug的机会。我们一定会在这篇博客的后续文章中探讨这个问题……

有什么意见吗？

所以，我知道这篇文章可能感觉比较基础，甚至过于适合初学者（如果真的有这种东西的话）。但这正是这篇文章的目标读者——初学者。那些渴望学习新事物并……调试东西的人。而且，如果你是一位经验丰富的程序员，也许这篇文章会让你思考一下，你使用 Console API 的频率，而不是其他可能更好的选择？

想要及时了解我的最新内容，不妨在Twitter、Facebook或Reddit上关注我。我还有一个YouTube 频道（最新 Web 开发新闻视频已发布！），感兴趣的话可以去看看。而且，你猜怎么着？祝你拥有“无 bug”的一天！

文章来源：https://dev.to/areknawo/javascript-debugging-done-right-523p
Devto 翻译
PREV
JavaScript 从内到外！所有术语……从更高层次理解设计、实现细节，知识点丰富！
NEXT
JS 单元测试简介 为什么要测试？ 测试种类 术语 单元测试 Jest Mocha Jasmine Tape AVA Intern Cucumber.js 测试，测试...