使用 vscode 启用内置的 Javascript debugger

在进行 Javascript 开发时，调试代码是非常重要的一环。vscode 是一个非常流行的代码编辑器，它内置了一个强大的调试工具，可以帮助开发者更轻松地定位和解决代码中的问题。本文将介绍如何在 vscode 中启用内置的 Javascript debugger，并演示如何使用它来调试代码。

准备工作

在开始之前，确保你已经安装了最新版本的 vscode。如果还没有安装，你可以从 [官方网站]( 下载安装程序。

启用内置的 Javascript debugger

  1. 打开一个 Javascript 文件（.js 后缀）。
  2. 点击代码编辑器左侧的调试图标（一个虫子的图标）或者按下 Ctrl+Shift+D 打开调试视图。
  3. 点击页面上方的绿色箭头按钮，选择“创建 launch.json 文件”，然后选择“Node.js”。
  4. 在弹出的 launch.json 文件中配置中，确认 program 字段指向你要调试的 Javascript 文件。
  5. 在代码中设置断点（点击行号左侧或者使用 F9 快捷键）。
  6. 点击页面上方的绿色箭头按钮启动调试。

示例代码

下面是一个简单的 Javascript 示例代码，我们将使用内置的 debugger 来调试它。

function add(a, b) {
    return a + b;
}

let result = add(2, 3);
console.log(result);

在上面的代码中，我们定义了一个 add 函数来计算两个数的和，并调用它来计算 2 和 3 的和。现在让我们尝试使用 vscode 的调试工具来查看代码执行过程。

调试代码

  1. 在代码第二行 return a + b; 处设置一个断点。
  2. 点击页面上方的绿色箭头按钮启动调试。
  3. 程序会在断点处停下，你可以在调试视图中查看变量的值，逐步执行代码并观察执行过程。

调试控制

在调试过程中，vscode 提供了一些常用的调试控制功能，例如：

  • 继续执行（F5）
  • 单步执行（F10）
  • 跳入函数（F11）
  • 跳出函数（Shift+F11）
  • 停止调试（Shift+F5）

通过这些控制功能，你可以更方便地逐步调试代码，定位问题所在。

总结

通过本文的介绍，你学会了如何在 vscode 中启用内置的 Javascript debugger，并且掌握了一些基本的调试技巧。调试是程序开发中必不可少的一部分，希望这些知识对你的开发工作有所帮助。

旅程图

journey
    title 调试 Javascript 代码
    section 配置
        创建 launch.json 文件: 已完成
        配置 program 字段: 已完成
    section 调试
        设置断点: 已完成
        启动调试: 已完成
    section 控制
        继续执行: 已完成
        单步执行: 已完成
        停止调试: 已完成

参考

  • [vscode 官方文档](
  • [JavaScript Debugging Guide](

希望本文对你有所帮助，祝愉快的编程旅程！