Visual Studio Code Chrome Debugger插件指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00374/article/details/142801337

Visual Studio Code Chrome Debugger插件指南

vscode-chrome-debug Debug your JavaScript code running in Google Chrome from VS Code. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-chrome-debug

1. 目录结构及介绍

本部分基于microsoft/vscode-chrome-debug仓库，解析其核心的目录布局和关键文件。

- .gitignore           # 忽略不需要纳入版本控制的文件列表
- package.json         # 包含了项目元数据，依赖关系等
- package-lock.json    # 详细记录依赖项的确切版本，确保可复现的安装过程
- LICENSE.txt          # 许可证信息，说明软件使用的授权方式
- CONTRIBUTING.md      # 对贡献者的指导文档
- README.md            # 主要的项目介绍文档
- SECURITY.md          # 安全相关的信息和指导
- ThirdPartyNotices.txt # 关于第三方库使用的声明文件
- gulpfile.js          # Gulp任务文件，用于自动化构建流程
- src/                 # 源代码目录，存放扩展的核心逻辑
- test/                # 测试相关文件，用于验证功能正确性
- testdata/            # 测试数据，用于测试场景模拟
- *.json               # 各种配置文件，如tsconfig.json和tslint.json用于TypeScript编译和代码风格检查

重点文件介绍:

README.md: 用户指南和快速入门说明。
src/: 包括了插件的主要JavaScript源码，实现VSCode与Chrome调试的交互逻辑。
vscode-ignore: 可能指示忽略的特定VSCode相关的文件或模式。

2. 项目的启动文件介绍

此项目作为VSCode的扩展，并无传统意义上的“启动文件”。它通过VSCode的插件机制被加载和激活。然而，从开发角度，开发人员可能关注的是主要入口点，通常是某个初始化脚本或者VSCode规定的扩展点定义，比如在src目录下的初始化逻辑，以及package.json中定义的激活事件。

在package.json中有contributes字段定义了扩展的功能贡献，包括命令、调试器等。这些是插件启动后如何与VSCode互动的关键。

3. 项目的配置文件介绍

主要配置文件：`.vscode/launch.json`

虽然仓库本身不直接展示用户的配置示例，但指明了使用该插件时需在VSCode工作区创建或修改的launch.json配置文件重要性。

示例配置段落：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach to Browser",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

launch.json: 是VSCode调试配置的中心，定义了各种调试环境和参数。可以设置为“launch”以启动Chrome并加载指定URL，或设置为“attach”来连接到已打开且启用了远程调试的Chrome实例。
关键字段：
- "request": 表明是启动一个新的Chrome进程还是连接到一个已经运行的进程。
- "url" 或 "file": 分别用于直接指定页面地址或本地文件路径启动调试。
- "webRoot": 确定源代码的基础路径，对于源映射至关重要。
- "port": 当请求类型为“attach”时，需与Chrome的远程调试端口对应。