圖層面板：探索網站圖層

Dale St. Marthe
Dale St. Marthe
LinkedIn

您可以透過「圖層」面板，瞭解網站的組成以及瀏覽器顯示內容的方式。分析網站的 3D 圖表，找出轉譯問題、修正捲動錯誤，並改善動畫效果。

總覽

使用「Layers」面板執行下列操作：

  • 查看文件圖層。
  • 檢查文件圖層。
  • 設定 DOM 變更中斷點。
  • 查看 Paint Profiler 資訊。
  • 找出捲動速度緩慢的元素。

開啟「圖層」面板

如要開啟「Layers」面板，請按照下列步驟操作：

  1. 開啟開發人員工具。
  2. 按下以下指令開啟「Command」選單：
    • macOS：Command + Shift + P 鍵
    • Windows、Linux、ChromeOS：Control + Shift + P 鍵 含有
  3. 開始輸入 Layers，選取「顯示圖層面板」，然後按下 Enter 鍵。

或者，您也可以依序選取右上角的「more_vert」more_vert「更多選項」>「更多工具」 >「圖層面板」。

此外，您也可以在「Performance」面板的「Layers」分頁中，查看錄影檔的每個影格層。詳情請參閱「查看圖層資訊」。

查看文件圖層

「圖層」面板最左側的部分會在可展開的樹狀結構中，列出文件中所有轉譯的圖層。瀏覽頁面時，這個樹狀結構會隨之更新。圖層會以 CSS 選取器或數字標示，後面接著是圖層的尺寸 (以像素為單位)。

圖層樹狀結構。

將滑鼠游標懸停在圖層上，即可在網頁和圖表中將其標示為已選取。頁面中會顯示工具提示，並提供以下資訊：

  • 圖層的選取器。
  • 圖層的尺寸，以像素為單位。
  • 代表 CSS 格線或 Flex 的圖示 (適用於相關情況)。

web.dev 橫幅上的工具提示。

檢查文件圖層

按一下圖層，在「詳細資料」窗格中查看更多資訊。

「詳細資料」分頁。

視圖層而定，系統會顯示下列資訊：

  • 大小
  • 合成原因
  • 預估記憶體
  • 繪製次數
  • 慢速捲動區域
  • 固定位置限制條件

此圖表顯示這個頁面中圖層的堆疊和排列方式，包括位置在可視區域外的元素。

「Layers」面板圖表。

如要移動圖表，請按照下列步驟操作：

  • 使用 WASD 移動圖表。按下 W 鍵可向上平移、A 鍵可向左平移、S 鍵可向下平移，而 D 鍵則可向右平移。
  • 按一下「平移模式」圖示 drag_pan，或按下 X 鍵並拖曳，即可沿著 X 和 Y 軸移動。
  • 按一下「旋轉模式」360 或按下 V 鍵，然後拖曳即可沿 Z 軸旋轉。
  • 按一下「重設轉換」zoom_in_map 或按下 0 鍵，即可將圖表重設為原始位置。
  • 按下 Shift + + 或滑鼠滾輪向上，即可放大畫面。
  • 按下 Shift + - 或向下鍵，即可縮小畫面。

如要在「元素」面板中查看圖層的對應 DOM 元素，請在圖表或圖層樹狀結構中按一下滑鼠右鍵，然後點選「在元素面板中顯示」。

此外，「圖層」面板會隱藏未代管或繪製內容的特定圖層。如要顯示這些圖層，請在圖層樹狀結構上按一下滑鼠右鍵，然後選取「顯示內部圖層」。

設定 DOM 變更中斷點

您可以使用「Layers」面板設定 DOM 變更中斷點。

如要設定 DOM 變更中斷點，請按照下列步驟操作：

  1. 在圖層樹狀結構中按一下滑鼠右鍵。
  2. 將滑鼠遊標懸停在「分隔為」上，然後選取「子樹狀結構修改」、「屬性修改內容」或「移除節點」。

您可以前往下列位置查看 DOM 變更中斷點清單：

  • 「Elements」>「DOM Breakpoints」分頁。
  • 「來源」>「DOM 中斷點」可收合區段。

「來源」和「元素」面板中可列出中斷點。

如要進一步瞭解中斷點類型，請參閱「DOM 變更中斷點類型」。

查看 Paint Profiler 資訊

「圖層」面板可讓您查看圖層的詳細資訊，將網頁內容呈現在 3D 圖表上。

如要啟用Paint Profiler，請按照下列步驟操作：

  1. 勾選動作列中的「check_box」check_box「Paints」核取方塊。
  2. 從圖層樹狀結構中選取圖層。
  3. 按一下「Details」窗格底部的「Paint Profiler」。請注意，並非所有圖層都有這個選項。

「Profiler」分頁隨即開啟，並顯示油漆記錄和代表油漆成本分佈的直方圖。

「Profiler」分頁。

啟用「Paints」時，也會在圖表上顯示大部分的網頁內容。

找出捲動速度緩慢的元素

有些網站會使用 JavaScript 偵測元素的捲動或觸控事件，但這可能會影響捲動速度。如要找出包含與捲動相關的事件監聽器，且可能會影響效能的圖層，請按一下「Slow scroll rects」check_box核取方塊。

圖中的緩慢捲動層。

可能導致捲動速度變慢的圖層會以粉紅色標示。