測試與偵錯
目錄
為了改善開發者體驗,Docker Desktop 提供了一套工具來協助您測試和除錯您的擴充功能。
開啟 Chrome DevTools
當您選取擴充功能 (Extensions) 分頁時,若要開啟擴充功能的 Chrome DevTools,請執行:
$ docker extension dev debug <name-of-your-extensions>
後續每次點擊擴充功能分頁時,也會開啟 Chrome DevTools。若要停止此行為,請執行:
$ docker extension dev reset <name-of-your-extensions>
部署擴充功能後,也可以透過類似 Konami Code 的組合鍵,從介面擴充功能部分開啟 Chrome DevTools。請選取擴充功能 (Extensions) 分頁,然後按下列按鍵順序:上, 上, 下, 下, 左, 右, 左, 右, p, d, t。
開發使用者介面時的熱重載 (Hot reloading)
在 UI 開發期間,使用熱重載來測試變更而不必重新建置整個擴充功能是非常有幫助的。為此,您可以設定 Docker Desktop 從開發伺服器載入您的 UI,例如當使用 npm start 呼叫時 Vite 所啟動的伺服器。
假設您的應用程式在預設連接埠上執行,請啟動您的 UI 應用程式,然後執行:
$ cd ui
$ npm run dev
這會啟動一個監聽連接埠 3000 的開發伺服器。
現在您可以指示 Docker Desktop 將此作為前端來源。在另一個終端機中執行:
$ docker extension dev ui-source <name-of-your-extensions> https://:3000
關閉並重新開啟 Docker Desktop 儀表板並前往您的擴充功能。對前端程式碼的所有變更都將立即顯示。
完成後,您可以將擴充功能設定重設為原始設定。如果您使用了 docker extension dev debug <您的擴充功能名稱>,這也會重設 Chrome DevTools 的開啟行為。
$ docker extension dev reset <name-of-your-extensions>
顯示擴充功能容器
如果您的擴充功能是由一個或多個以容器形式在 Docker Desktop VM 中執行的服務所組成,您可以輕鬆地從 Docker Desktop 的儀表板存取它們。
- 在 Docker Desktop 中,導覽至設定 (Settings)。
- 在擴充功能 (Extensions) 分頁下,選取顯示 Docker Desktop 擴充功能系統容器 (Show Docker Desktop Extensions system containers) 選項。現在您可以檢視您的擴充功能容器及其日誌。
清理
若要移除擴充功能,請執行:
$ docker extension rm <name-of-your-extension>
接下來
- 建置一個進階前端擴充功能。
- 了解更多關於擴充功能 架構 的資訊。
- 探索我們的設計原則。
- 請查看我們的 UI 樣式指南。
- 了解如何設定擴充功能的 CI。