测试和调试
目录
为了改善开发人员体验,Docker Desktop 提供了一组工具来帮助您测试和调试扩展。
打开 Chrome DevTools
要打开扩展的 Chrome DevTools,在您选择 **扩展** 选项卡时,请运行
$ docker extension dev debug <name-of-your-extensions>
每次后续点击扩展选项卡都会打开 Chrome DevTools。要停止此行为,请运行
$ docker extension dev reset <name-of-your-extensions>
扩展部署后,也可以使用 科纳米密码 的变体从 UI 扩展部分打开 Chrome DevTools。选择 **扩展** 选项卡,然后按 上,上,下,下,左,右,左,右,p,d,t
键序列。
开发 UI 时的热重载
在 UI 开发期间,使用热重载来测试更改而无需重新构建整个扩展非常有用。为此,您可以配置 Docker Desktop 从开发服务器加载 UI,例如使用 Vite 在使用 npm start
调用时启动。
假设您的应用程序运行在默认端口上,请启动您的 UI 应用程序,然后运行
$ cd ui
$ npm run dev
这将启动一个在端口 3000 上侦听的开发服务器。
您现在可以告诉 Docker Desktop 将其用作前端源。在另一个终端中运行
$ docker extension dev ui-source <name-of-your-extensions> https://127.0.0.1:3000
关闭并重新打开 Docker Desktop 仪表板,然后转到您的扩展。对前端代码的所有更改都会立即显示。
完成后,您可以将扩展配置重置为原始设置。如果您使用了 docker extension dev debug <name-of-your-extensions>
,这也会重置打开 Chrome DevTools。
$ docker extension dev reset <name-of-your-extensions>
显示扩展容器
如果您的扩展由一个或多个作为 Docker Desktop VM 中的容器运行的服务组成,则可以轻松地从 Docker Desktop 的仪表板中访问它们。
- 在 Docker Desktop 中,导航到 **设置**。
- 在 **扩展** 选项卡下,选择 **显示 Docker Desktop 扩展系统容器** 选项。您现在可以查看扩展容器及其日志。
清理
要删除扩展,请运行
$ docker extension rm <name-of-your-extension>
下一步
- 构建一个 高级前端 扩展。
- 详细了解扩展 架构。
- 探索我们的 设计原则。
- 查看我们的 UI 样式指南。
- 了解如何 为您的扩展设置 CI。