测试和调试
目录
为了提高开发者体验,Docker Desktop 提供了一套工具来帮助您测试和调试您的扩展。
打开 Chrome 开发者工具
为了在您选择扩展程序标签时打开Chrome DevTools,请运行:
$ docker extension dev debug <name-of-your-extensions>
每次点击扩展标签页也会打开Chrome DevTools。要停止此行为,请运行:
$ docker extension dev reset <name-of-your-extensions>
扩展部署后,还可以使用Konami Code的变体从UI扩展部分打开Chrome DevTools。选择扩展标签,然后按下键序列up, up, down, down, left, right, left, right, 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> http://localhost:3000
关闭并重新打开Docker Desktop仪表板,然后转到您的扩展程序。前端代码的所有更改都会立即显示。
完成后,您可以将扩展配置重置为原始设置。如果您使用了docker extension dev debug ,这也将重置打开Chrome DevTools:
$ docker extension dev reset <name-of-your-extensions>
显示扩展容器
如果您的扩展由一个或多个在Docker Desktop虚拟机中作为容器运行的服务组成,您可以从Docker Desktop的仪表板轻松访问它们。
- 在 Docker Desktop 中,导航到 设置。
- 在扩展选项卡下,选择显示Docker桌面扩展系统容器选项。您现在可以查看您的扩展容器及其日志。
清理
要删除扩展,请运行:
$ docker extension rm <name-of-your-extension>
下一步是什么
- 构建一个 高级前端 扩展。
- 了解更多关于扩展 architecture的信息。
- 探索我们的 设计原则。
- 查看我们的 UI 样式指南。
- 学习如何 为您的扩展设置CI。