测试和调试
目录
为了改善开发人员体验,Docker Desktop 提供了一套工具来帮助您测试和调试扩展。
打开 Chrome 开发者工具
若要在选择 扩展程序 选项卡时打开扩展的 Chrome 开发者工具,请运行:
$ docker extension dev debug <name-of-your-extensions>
每次点击扩展标签也会打开 Chrome 开发者工具。要停止此行为,请运行:
$ docker extension dev reset <name-of-your-extensions>
扩展部署后,也可以使用科乐美秘籍的变体从 UI 扩展部分打开 Chrome 开发者工具。选择 扩展 选项卡,然后按键盘序列 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 <name-of-your-extensions>,这也会重置打开 Chrome 开发者工具的设置:
$ docker extension dev reset <name-of-your-extensions>
显示扩展容器
如果您的扩展由在 Docker Desktop VM 中作为容器运行的一个或多个服务组成,您可以从 Docker Desktop 的仪表板轻松访问它们。
- 在 Docker Desktop 中,导航至 设置。
- 在 扩展 选项卡下,选择 显示 Docker Desktop 扩展系统容器 选项。您现在可以查看您的扩展容器及其日志了。
清理
要移除扩展,请运行以下命令:
$ docker extension rm <name-of-your-extension>
接下来是什么
- 构建一个 高级前端扩展。
- 了解更多关于扩展的信息 架构。
- 探索我们的 设计原则。
- 请参阅我们的 界面样式指南。
- 了解如何 为您的扩展设置 CI。