各位戰士，歡迎來到第十六天的戰場。昨天，我們從理論上學習了 Jank 是如何因為 UI Thread 阻塞、錯過 VSYNC 號令而產生的。理論是我們的作戰地圖，但要打贏戰爭，我們必須親赴前線，學會使用偵測工具來識別敵軍。

今天，我們將解鎖每個 Android 開發者武器庫中最基礎、最直觀的兩款偵查利器。它們就藏在我們手機的「開發人員選項」中，能讓我們用肉眼就「看見」性能問題。

進入軍械庫：啟用「開發人員選項」

首先，確保你的偵查設備（測試手機）已經開啟了開發人員模式。如果尚未開啟，請依照以下步驟操作：

1. 進入手機的 設定 > 關於手機。
2. 找到「版本號碼」(Build number) 這一項。
3. 連續點擊 7 次，直到系統提示「您現在已成為開發人員」。
4. 返回上一頁，你就會在「系統」或設定主頁中找到新的「開發人員選項」。

現在，我們的軍械庫大門已經敞開。

利器一：Debug GPU Overdraw (偵錯 GPU 過度繪製)

這是什麼？
「Overdraw」(過度繪製) 指的是，在同一幀畫面中，同一個像素被重複繪製了多次。想像一下，你先刷了一層白牆（Activity 背景），然後掛上一幅畫（CardView），畫上面還有字（TextView）。牆壁上被畫遮住的部分，就是一次「Overdraw」。

為何要關注？
輕微的 Overdraw 是正常的，但過度的 Overdraw 會浪費 GPU 的寶貴資源。GPU 不得不多次為同一個像素點著色，這會增加耗電，並在複雜的介面中拖慢渲染速度，成為 Jank 的幫兇。它是一個關於「渲染效率」的指標。

如何使用？

1. 在「開發人員選項」中，向下找到「硬體加速轉譯」區塊。
2. 點擊「偵錯 GPU 過度繪製」(Debug GPU overdraw)。
3. 選擇「顯示過度繪製區域」(Show overdraw areas)。

啟用後，你的手機螢幕會被各種顏色覆蓋，這些顏色就是敵情的標示：

• 原色：沒有 Overdraw，像素只被繪製了 1 次 (最優)。
• 藍色：1x Overdraw，像素被繪製了 2 次 (可接受)。
• 綠色：2x Overdraw，像素被繪製了 3 次 (需要留意)。
• 淡紅色：3x Overdraw，像素被繪製了 4 次 (有問題，需要修改)。
• 暗紅色：4x+ Overdraw，像素被繪製了 5 次以上 (嚴重問題，必須修復)。

如何殲滅 (修復)？
我們的目標是消滅紅色，並盡可能減少綠色。

• 移除不必要的背景：如果一個 RecyclerView 有自己的不透明背景色，那麼它所在的父佈局 ConstraintLayout 的背景色就是多餘的，可以設定為 @null。
• 簡化與扁平化佈局：使用 ConstraintLayout 來避免深層的巢狀佈局。層級越少，Overdraw 的可能性就越低。
• 裁剪畫布 (Canvas Clipping)：在自訂 View 中，使用 canvas.clipRect() 來告訴系統只需要繪製可見區域，避免繪製被其他 View 完全遮擋的部分。

利器二：Profile GPU Rendering (GPU 轉譯設定檔)

這是什麼？
如果說 Overdraw 工具是看「效率」，那麼這個工具就是看「速度」。它會在你的螢幕上顯示一個即時的柱狀圖，告訴你每一幀畫面到底花了多少時間來渲染。它就是我們的「Jank 測謊機」。

如何使用？

1. 在「開發人員選項」的同一個區塊，找到「GPU 轉譯設定檔」(Profile GPU rendering)。
2. 選擇「在畫面上以長條圖顯示」(On screen as bars)。

啟用後，你操作 App 的任何介面，底部或中間都會出現滾動的彩色柱狀圖。

如何判讀？

• 綠色水平線：這條線就是我們的生命線——16ms 基準線。
• 垂直彩色長條：每一個長條代表渲染的一幀。長條的高度代表了渲染該幀所花費的時間。
• 判讀戰況：
  • 如果所有長條都在綠線以下，恭喜你，陣地穩固，UI 是流暢的。
  • 一旦有任何一個長條的高度超過了綠線，就代表那一幀的渲染時間超過了 16ms。一次 Jank 就發生了！這個工具可以讓你即時地知道是哪個操作（例如：快速滑動列表、點開某個視窗）導致了卡頓。

圖中，不同顏色代表渲染管線的不同階段。現階段，我們只需要重點關注兩件事：

1. 長條的總高度：是否超過了綠線。
2. 藍色部分的高度：藍色代表 UI Thread 執行 onMeasure, onLayout, onDraw 的時間。如果藍色部分特別高，幾乎可以肯定問題就出在我們的 View 佈局和繪製邏輯上。

今日總結

今天，我們學會了如何使用兩款最基礎的視覺化偵查工具，它們能幫助我們快速發現問題：

• Debug GPU Overdraw：用來排查渲染效率問題，找到那些被重複繪製多次的 UI 區域。
• Profile GPU Rendering：用來排查渲染速度問題，直接用長條圖告訴我們哪一幀超過了 16ms 的生死線。

這兩款工具是我們 UI 流暢度戰爭中的「望遠鏡」和「聽診器」，能幫助我們快速進行初步診斷。它們告訴了我們「這裡有問題」。

但是，要弄清楚「問題到底是什麼」，我們需要更精密的儀器。明天，我們將學習使用 Android 性能分析的終極神器：systrace/Perfetto，它能為我們拍下 CPU 活動的詳細「X光片」，讓 Jank 的元兇無所遁形。

我們明天見！