1. 前言
在开发前端项目时，我们经常需要在浏览器中调试 JavaScript 代码，以解决出现的问题或者检查代码执行情况。VSCode 作为一款强大的代码编辑器，提供了很多调试工具，其中包括对浏览器的调试功能。通过这个调试功能，我们可以在 VSCode 编辑器中方便地调试运行在浏览器上的 JavaScript 代码。下面我们就来详细了解一下怎么在 VSCode 中调试浏览器上的 JavaScript 代码。
2. 安装插件
在开始使用 VSCode 进行浏览器调试前，我们需要在 VSCode 中安装一个插件：Debugger for Chrome。这个插件可以帮助 VSCode 和 Chrome 之间建立调试连接，让我们能够在 VSCode 编辑器中进行浏览器调试。
2.1 安装 Debugger for Chrome 插件
打开 VSCode 编辑器后，点击左侧菜单栏中的 Extensions 图标，然后在搜索框中输入 Debugger for Chrome。找到该插件后，点击 Install 按钮进行安装。
<strong>Tip</strong>: 如果没有找到该插件，可以点击 View all 按钮，然后在搜索框中输入 Debugger for Chrome 进行搜索。3. 配置 Debug 功能
安装完插件后，我们需要进行一些 Debug 配置，以便让 VSCode 和 Chrome 能够互相通信，从而实现调试功能。
3.1 配置 launch.json 文件
在 VSCode 编辑器中，我们需要编辑配置文件 launch.json。这个文件保存了 VSCode 的调试配置信息。
首先，我们需要在 VSCode 编辑器中打开一个项目文件夹，然后在 Explorer 侧边栏中选择“添加配置文件”->“Add Configuration...”->“Chrome”。
这时 VSCode 会自动生成 launch.json 文件，并打开该文件进行编辑。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
这里我们来解释一下每个属性的含义和作用。
version: Debug 配置文件的版本号，当前是 0.2.0
configurations: 包含了调试所需的配置信息列表，每个配置项对应一种调试模式。
type: 调试的类型，每种类型都有其特定的配置项。这里我们使用的是 Chrome 浏览器。
request: 启动调试的方式，有两种方式：launch 和 attach，我们这里使用的是 launch 方式。
name: 当前配置的名称。
url: 要调试的页面的 URL。
webRoot: 配置调试时使用的工作目录。
4. 启动调试功能
在完成配置文件的编辑后，我们就可以启动浏览器的调试功能了。
4.1 启动 Chrome 并打开指定页面
我们需要先启动 Chrome 浏览器，并打开需要调试的页面。
注意：在启动 Chrome 浏览器时，需要添加一些启动参数，以便和 VSCode 建立调试连接。我们需要在命令行中输入以下命令启动 Chrome 浏览器：
chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile其中，--remote-debugging-port=9222 表示开启调试端口，并指定端口号为 9222；--user-data-dir=remote-profile 表示开启一个新的 Chrome 用户配置，以避免启动多个 Chrome 实例时发生冲突。
启动 Chrome 后，打开需要调试的页面。这时可以按 F12 键打开 Chrome 的 DevTools 窗口，确保浏览器支持调试功能。
4.2 启动 Debug 功能
在保证 Chrome 浏览器已经启动且打开了需要调试的页面后，我们就可以启动 VSCode 的 Debug 功能来与浏览器建立调试连接了。
首先，需要在 VSCode 的左侧边栏中找到 Debug 图标，然后在顶部菜单栏中选择需要运行的调试模式（名称为 "Launch Chrome against localhost"）。
选中调试模式后，点击调试按钮（即“启动调试”按钮）。这时 VSCode 会与 Chrome 浏览器建立调试连接，然后加载页面并开始运行代码。
4.3 调试代码
在代码中设置断点并开始调试。
通过上述步骤，我们已经成功地在 VSCode 中启动了浏览器调试功能，可以使用 VSCode 中的调试工具调试 JavaScript 代码了。
5. 总结
本文介绍了在 VSCode 中如何调试浏览器上的 JavaScript 代码，需要进行的步骤包括安装插件、配置 launch.json 文件、启动 Chrome 浏览器并打开对应页面以及启动 Debug 功能。使用这个调试功能可以大大提高调试效率，方便我们在开发过程中进行代码调试和问题排查。