您可以透過「圖層」面板,瞭解網站的組成以及瀏覽器顯示內容的方式。分析網站的 3D 圖表,找出轉譯問題、修正捲動錯誤,並改善動畫效果。
總覽
使用「Layers」面板執行下列操作:
- 查看文件圖層。
- 檢查文件圖層。
- 設定 DOM 變更中斷點。
- 查看 Paint Profiler 資訊。
- 找出捲動速度緩慢的元素。
開啟「圖層」面板
如要開啟「Layers」面板,請按照下列步驟操作:
- 開啟開發人員工具。
- 按下以下指令開啟「Command」選單:
- macOS:Command + Shift + P 鍵
- Windows、Linux、ChromeOS:Control + Shift + P 鍵
- 開始輸入
Layers
,選取「顯示圖層面板」,然後按下 Enter 鍵。
或者,您也可以依序選取右上角的「more_vert」more_vert「更多選項」>「更多工具」 >「圖層面板」。
此外,您也可以在「Performance」面板的「Layers」分頁中,查看錄影檔的每個影格層。詳情請參閱「查看圖層資訊」。
查看文件圖層
「圖層」面板最左側的部分會在可展開的樹狀結構中,列出文件中所有轉譯的圖層。瀏覽頁面時,這個樹狀結構會隨之更新。圖層會以 CSS 選取器或數字標示,後面接著是圖層的尺寸 (以像素為單位)。
將滑鼠游標懸停在圖層上,即可在網頁和圖表中將其標示為已選取。頁面中會顯示工具提示,並提供以下資訊:
- 圖層的選取器。
- 圖層的尺寸,以像素為單位。
- 代表 CSS 格線或 Flex 的圖示 (適用於相關情況)。
檢查文件圖層
按一下圖層,在「詳細資料」窗格中查看更多資訊。
視圖層而定,系統會顯示下列資訊:
- 大小
- 合成原因
- 預估記憶體
- 繪製次數
- 慢速捲動區域
- 固定位置限制條件
此圖表顯示這個頁面中圖層的堆疊和排列方式,包括位置在可視區域外的元素。
如要移動圖表,請按照下列步驟操作:
- 使用 WASD 移動圖表。按下 W 鍵可向上平移、A 鍵可向左平移、S 鍵可向下平移,而 D 鍵則可向右平移。
- 按一下「平移模式」圖示 drag_pan,或按下 X 鍵並拖曳,即可沿著 X 和 Y 軸移動。
- 按一下「旋轉模式」360 或按下 V 鍵,然後拖曳即可沿 Z 軸旋轉。
- 按一下「重設轉換」zoom_in_map 或按下 0 鍵,即可將圖表重設為原始位置。
- 按下 Shift + + 或滑鼠滾輪向上,即可放大畫面。
- 按下 Shift + - 或向下鍵,即可縮小畫面。
如要在「元素」面板中查看圖層的對應 DOM 元素,請在圖表或圖層樹狀結構中按一下滑鼠右鍵,然後點選「在元素面板中顯示」。
此外,「圖層」面板會隱藏未代管或繪製內容的特定圖層。如要顯示這些圖層,請在圖層樹狀結構上按一下滑鼠右鍵,然後選取「顯示內部圖層」。
設定 DOM 變更中斷點
您可以使用「Layers」面板設定 DOM 變更中斷點。
如要設定 DOM 變更中斷點,請按照下列步驟操作:
- 在圖層樹狀結構中按一下滑鼠右鍵。
- 將滑鼠遊標懸停在「分隔為」上,然後選取「子樹狀結構修改」、「屬性修改內容」或「移除節點」。
您可以前往下列位置查看 DOM 變更中斷點清單:
- 「Elements」>「DOM Breakpoints」分頁。
- 「來源」>「DOM 中斷點」可收合區段。
如要進一步瞭解中斷點類型,請參閱「DOM 變更中斷點類型」。
查看 Paint Profiler 資訊
「圖層」面板可讓您查看圖層的詳細資訊,將網頁內容呈現在 3D 圖表上。
如要啟用Paint Profiler,請按照下列步驟操作:
- 勾選動作列中的「check_box」check_box「Paints」核取方塊。
- 從圖層樹狀結構中選取圖層。
- 按一下「Details」窗格底部的「Paint Profiler」。請注意,並非所有圖層都有這個選項。
「Profiler」分頁隨即開啟,並顯示油漆記錄和代表油漆成本分佈的直方圖。
啟用「Paints」時,也會在圖表上顯示大部分的網頁內容。
找出捲動速度緩慢的元素
有些網站會使用 JavaScript 偵測元素的捲動或觸控事件,但這可能會影響捲動速度。如要找出包含與捲動相關的事件監聽器,且可能會影響效能的圖層,請按一下「Slow scroll rects」check_box核取方塊。
可能導致捲動速度變慢的圖層會以粉紅色標示。