vscode Debugger详解

一、Debugger简介

Debugger，即调试器，是一种能够让开发者在程序运行时暂停程序的运行，并且可以检查程序状态的工具。在程序开发的过程中，调试器可以在程序出现问题时，帮助我们快速定位并修复问题。

二、vscode Debugger概述

vscode Debugger是Visual Studio Code集成式开发环境中的调试器。它能够针对多种编程语言，提供全面的调试功能。

vscode Debugger的特点：

• 内置于Visual Studio Code中，可以快速启动
• 支持多种编程语言
• 支持调试控制台、表达式求值、变量查看等功能
• 可以自定义调试器配置，满足不同项目的需求

三、简单使用实例

下面以Python为例，演示如何在vscode中使用Debugger。

首先，我们需要安装Python插件，并在vscode中创建一个Python文件。

# example.py
def add(a, b):
  c = a + b
  return c

result = add(1, 2)
print(result)

在代码中，我们定义了一个add函数，实现两数相加，并在最后打印结果。

接下来，我们需要在代码中添加断点，以便在运行程序时暂停程序的执行，进行调试。将光标移到第三行代码上（c = a + b），然后点击该行代码左侧的空白区域，即可添加断点。

接着，我们需要在vscode的调试界面配置Python环境和调试配置。点击vscode左侧的调试图标，选择“添加配置”，然后选择Python。

vscode会在.vscode文件夹中创建一个“launch.json”文件，并预设一个Python配置：

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

现在，我们需要修改该配置，指定Python解释器的路径，并将“stopOnEntry”设置为false，为了能够让程序运行到我们设置的断点处暂停。

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "stopOnEntry": false,
      "pythonPath": "/usr/bin/python3"  // 修改为你的Python解释器路径
    }
  ]
}

修改完成后，我们就可以开始调试我们的Python程序了！点击vscode左侧的调试按钮，然后点击“启动调试”按钮，程序就开始运行了。

程序运行时，会在第三行代码处停下来，等待我们的操作。此时，我们可以通过左侧的调试面板查看程序状态，并在面板中的“表达式求值”中输入表达式进行查看。我们也可以在代码中通过“悬停”和“变量查看”等功能查看变量值。

在调试面板中，我们还可以选择单步执行、跳过当前语句、进入函数等操作，帮助我们快速定位问题。

调试完成后，我们可以选择继续执行程序或者停止程序的运行。

四、自定义调试器配置

vscode Debugger支持自定义调试器配置，以满足不同项目的需求。

以前端开发为例，我们可以通过自定义调试器配置，使用Chrome DevTools对前端代码进行调试。首先，需要安装“Debugger for Chrome”插件。

然后，我们需要在.vscode文件夹中创建一个“launch.json”文件，并设置调试器配置。下面是一个配置示例：

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

配置说明：

• “name”: 调试器名称
• “type”: 调试器类型
• “request”: 启动方式
• “url”: 调试Web应用的URL
• “webRoot”: Web应用的WebRoot路径
• “sourceMapPathOverrides”: 源码路径映射

完成配置后，我们可以通过调试按钮启动调试器，然后打开Chrome DevTools进行调试。

五、总结

本文对vscode Debugger进行了详细的介绍，包括简介、概述、使用实例和自定义配置等内容。通过本文的学习，相信大家对vscode Debugger已经有了更深入的了解。