Vue Devtools

贡献

您好！我们非常高兴您有兴趣为 Vue Devtools 贡献代码。在提交您的贡献之前，请务必花点时间阅读以下指南。

单仓库

该仓库是一个包含多个嵌套包的单仓库。

包描述
api可在 Vue 插件中安装的公共 Devtools API
app-backend-api用于连接公共 API、核心和 Vue 处理程序的抽象 API
app-backend-core注入页面以与 Vue 应用程序交互的主要逻辑
app-backend-vue1支持 Vue 1 的解耦处理程序（即将推出）
app-backend-vue2支持 Vue 2 的解耦处理程序
app-backend-vue3支持 Vue 3 的解耦处理程序
app-frontend在浏览器 Devtools 面板中显示的 Vue 应用程序
shell-chromeChrome/Firefox 扩展程序
shell-electronElectron 独立应用程序
shell-host开发环境
shell-dev-vue2用于开发的演示应用程序（Vue 2）
shell-dev-vue3用于开发的演示应用程序（Vue 3）

开发

  1. 克隆 此仓库
  2. 在仓库根目录中运行 yarn install 以安装依赖项。
  3. 在两个不同的终端中运行 yarn run build:watch（编译并监视包）和 yarn run dev:vue3（运行开发 shell）。等待第一个终端中的初始编译完成，然后再运行第二个命令。
  4. 一个带有测试应用程序的普通 shell 将在 https://127.0.0.1:8090 上可用。

拉取请求指南

感谢您的代码贡献！在打开 PR 之前，请务必阅读以下内容

  • 从基本分支（例如 main）检出一个主题分支，并合并回该分支。例如：feat/my-new-feature。

  • 创建 PR 时，请确保您允许维护者将更改推送到您的分支。

  • 如果添加新功能

    • 提供一个令人信服的理由来添加此功能。理想情况下，您应该首先打开一个建议问题，并在开始工作之前获得批准。

  • 如果修复错误

    • 如果您正在解决一个特殊问题，请在您的 PR 标题中添加 (fix #xxxx[,#xxxx])（#xxxx 是问题 ID）以获得更好的发布日志，例如 fix: update entities encoding/decoding (fix #3899)。
    • 在 PR 中提供错误的详细描述。优先提供实时演示。

  • 在您处理 PR 时，可以进行多个小的提交 - GitHub 可以自动在合并之前将它们压缩。

运行测试

  1. 运行 yarn lint 以使用 ESLint 检查代码质量。
  2. 运行 yarn test 以运行所有测试。（@TODO）

作为 Chrome 扩展程序进行测试

当您想使用源代码仓库构建扩展程序以获取尚未发布的功能时，这很有用。

  1. 克隆此仓库
  2. cd devtools 到新创建的文件夹
  3. 运行 yarn install
  4. 然后并行运行 yarn run build:watch 和 yarn run dev:chrome
  5. 打开 Chrome 扩展程序页面（当前位于 菜单 > 更多工具 > 扩展程序 下）
  6. 在右上角勾选“开发者模式”
  7. 点击左侧的“加载解压的”按钮，并选择文件夹：devtools/packages/shell-chrome/（它将有一个橙色的磁盘图标）
  8. 确保您禁用了所有其他版本的扩展程序

作为 Firefox 扩展程序进行测试

  1. 安装 web-ext
$ yarn global add web-ext

此外，请确保 PATH 已设置。在 ~/.bash_profile 中类似于以下内容

$ PATH=$PATH:$(yarn global bin)
  1. 克隆此仓库
  2. 运行 yarn install
  3. 然后并行运行 yarn run build:watch 和 yarn run dev:chrome
  4. 运行 yarn run:firefox

文档开发

  1. 克隆此仓库
  2. cd devtools 到新创建的文件夹
  3. 运行 yarn install
  4. 运行 docs:dev