Android Studio 提供 Compose UI 偵錯工具。
版面配置檢查器
版面配置檢查器可讓您在模擬器或實體裝置中,檢查運作中應用程式內的 Compose 版面配置。您可以使用版面配置檢查器,檢查某個可組合項的重組或略過頻率,這有助於找出應用程式的問題。舉例來說,某些程式設計錯誤可能會強制 UI 過度重組,進而導致效能不佳。部分程式設計錯誤也可能會導致 UI 無法重組,因而使得 UI 變更無法顯示在畫面上。如果您是第一次使用版面配置檢查器,請參閱指南,瞭解如何執行。
取得重組次數
對 Compose 版面配置進行偵錯時,如要瞭解 UI 的實作方式是否正確,必須知道可組合項的重組時機。舉例來說,如果重組次數過多,表示應用程式可能執行了不必要的工作。另一方面,如果預期應重組的元件沒有進行重組,則可能會導致未預期的行為。
版面配置檢查器會在您與應用程式互動時,顯示版面配置階層中的個別可組合項曾經重組或略過的時間。系統會在 Android Studio 中醒目顯示重組程序,協助您判斷可組合項在 UI 中的重組位置。
圖 1. 版面配置檢查器會醒目顯示重組程序。
醒目顯示的部分會在版面配置檢查器的圖片部分中顯示可組合項的漸層重疊效果,並且逐漸消失,方便您瞭解具有最高重組率的可組合項在 UI 中的位置。如果某個可組合項的重組率高於另一個可組合項,則第一個可組合項會呈現較深的漸層重疊色彩。如果在版面配置檢查器中按兩下某個可組合項,系統會引導您前往對應的程式碼進行分析。
開啟「Layout Inspector」視窗,並連線至應用程式程序。在「Component Tree」中,版面配置階層旁會顯示兩個資料欄。第一欄顯示每個節點的組合次數,第二欄則顯示每個節點的略過次數。選取可組合項節點時,系統會顯示該可組合項的尺寸和參數,但如果是內嵌函式,就無法顯示參數。當您從「Component Tree」或「Layout Display」中選取可組合項時,也可在「Attributes」窗格中看到類似資訊。
您可以重設計數,藉此瞭解與應用程式的特定互動期間有多少次重組或略過。如要重設計數,請按一下「Component Tree」窗格頂端附近的「Reset」。

圖 3. 在版面配置檢查器中啟用組合和略過計數器。
Compose 語意
在 Compose 中,語意會以無障礙服務和測試架構能夠理解的替代方式描述 UI。您可以使用版面配置檢查器來檢查 Compose 版面配置中的語意資訊。
選取某個 Compose 節點後,可透過「Attributes」窗格檢查該節點是直接宣告語意資訊、合併其子項的語意,還是同時採用這兩種做法。如要快速找出包含語意 (無論是直接宣告或合併而來) 的節點,請在「Component Tree」窗格的「View Options」下拉式選單中選取「Highlight Semantics Layers」。選取這個選項後,系統只會醒目顯示樹狀結構中包含語意的節點,且您可以使用鍵盤快速瀏覽各個節點。
Compose UI 檢查
為協助您在 Jetpack Compose 中建構更具自動調整功能且無障礙的 UI,Android Studio 在 Compose 預覽中提供 UI 檢查模式。這項功能與檢視畫面的無障礙功能檢查工具類似。
在 Compose 預覽畫面上啟用 Compose UI 檢查模式時,Android Studio 會自動稽核 Compose UI,並建議改善措施,讓 UI 更容易存取且更具彈性。Android Studio 會檢查 UI 是否能在不同螢幕大小上正常運作。在「Problems」面板中,工具會顯示偵測到的問題,例如文字在大螢幕上拉伸或色彩對比度過低。
如要使用這項功能,請按一下 Compose 預覽畫面上的「UI Check」圖示:
UI 檢查功能會自動預覽不同設定下的 UI,並醒目顯示在不同設定中發現的問題。在「問題」面板中,按一下問題即可查看問題詳細資料、建議修正方式,以及醒目顯示問題區域的轉譯。

使用 AI 修正
在 UI 檢查模式中偵測到的問題,您可以使用 AI 代理提出並套用程式碼修正。在「問題」面板中,按一下問題上的「使用 AI 修正」按鈕。代理會分析問題和程式碼,並建議變更,解決無障礙或自動調整問題。
