有了 DevTools 的新捲動徽章，您就能更輕鬆地偵錯捲動相關問題！本文將說明可捲動元素的定義、為何難以找到這類元素，以及這項新功能如何協助您快速找到這些元素。我們也會帶您一窺幕後，瞭解我們如何開發捲動徽章。
什麼是可捲動元素？
如果您可以捲動元素中的內容，則該元素為可捲動元素 (或捲動容器)。無論是否有捲軸列，都沒關係。
為什麼很難找到可捲動的元素？
捲動畫面的問題很難偵測。如果沒有工具清楚顯示可捲動的元素，使用者很容易迷路，尤其是在沒有捲軸的複雜網頁上。
手動找出捲動的元素可能會是個費時的試誤過程：
- 您只要挑選元素並修改樣式即可。
- 捲軸是否消失？如果沒有，請重複執行這個程序。
隆重推出捲動徽章
在 Chrome 130 中，您可以使用「元素」面板中的新捲動徽章來找出可捲動的元素！
舉例來說，請嘗試使用新的捲動徽章，找出在下列範例中導致捲動條出現的元素。
新版捲動徽章的技術實作
在幕後，實作分為兩個部分：
- 識別可捲動的元素。使用
Blink’s(Chrome 的轉譯引擎) 信號，以識別頁面發生變化而可捲動或可捲動的元素。 - 顯示捲動徽章。收到信號後，我們會在「Elements」面板中，在可捲動的元素旁邊加入新的徽章 (類似現有的 grid 徽章)。
找出可捲動的元素
為了識別可捲動的元素，我們使用了 Blink 中的 IsUserScrollable 方法。這個方法會檢查節點是否沿著 X 或 Y 軸溢出，藉此判斷節點是否可捲動，表示內容超出容器尺寸，且可捲動。每次在 DevTools 中載入新元素時，我們都會呼叫這個方法，以便識別可捲動的容器。
為了動態更新已載入元素的捲動狀態，我們必須深入研究 Blink 算繪引擎程式碼庫，追蹤節點的捲動區域新增或移除的位置。
處理溢位情況的核心邏輯是由 PaintLayerScrollableArea 元件管理。具體來說，UpdateScrollableAreaSet 方法負責偵測發生溢位或已解決溢位問題的時間。
系統會傳送已變更 ScrollableArea 的節點參照，將這項資訊轉發至開發人員工具後端。
接著，後端會使用 IsUserScrollable 方法重新檢查節點，以取得新狀態。驗證捲動功能後，系統會使用 Chrome DevTools Protocol 將信號傳送至前端，確保 UI 能準確反映可捲動內容的變更。
顯示捲動徽章
為了在 DevTools 前端新增新徽章，我們在 ElementsTreeOutline 中建立了處理程序方法，該方法會接收元素的 nodeId，並透過事件變更其捲動狀態。在該處理常式中，我們會使用 nodeId 擷取 ElementsTreeElement 物件，並指示該物件更新捲動徽章。
更新捲動徽章時，系統會檢查元素是否可捲動，以及是否已顯示捲動徽章。系統會根據這些條件採取下列行動：
- 如果元素可捲動，但尚未有捲動徽章，系統會新增一個。
- 如果元素無法捲動，但具有捲動徽章，系統會移除現有徽章。
處理可捲動頂層文件的特殊邏輯
當頂層文件可捲動時，我們有特殊案例，原因是我們不會顯示主要文件的 #document 元素，僅適用於 iframe。因此，我們無法直接在 #document 元素上顯示徽章
我們決定改在 </html> 元素上顯示捲動徽章，包括 Quirks mode 中的徽章，其中 document.scrollingElement() 會傳回 <body> 或 null。這項決定可避免使用者在可捲動的文件和可捲動的內文元素之間產生混淆，尤其是在內文可獨立捲動的頁面。
我們發現這是向開發人員顯示可捲動的元素最清楚的方式。
Chrome 開發人員工具通訊協定 (CDP) 異動
如要整合新的捲動徽章，您必須變更 Chrome DevTools Protocol (CDP)。CDP 是開發人員工具和 Chrome 之間的通訊協定。
我們必須變更通訊協定，才能涵蓋以下兩種情況：
- 這個節點在開發人員工具中載入時是否可捲動？
- 這個節點是否已更新其可捲動狀態？
這個節點在開發人員工具中載入時是否可捲動？
我們在 DOM.Node 資料類型中加入了名為 isScrollable 的新屬性，每當開發人員工具前端載入新節點時，就會傳送該屬性。
我們決定只在這個屬性的情況下填入這個屬性，以免載入不必要的資料。因此，如果未傳送屬性，系統會假設元素不可捲動。
這個節點是否已更新其可捲動狀態？
為了偵測節點是否已更新其可捲動狀態，我們在 CDP 中推出了新的事件 scrollableFlagUpdated，只要元素獲得或失去可捲動區域，就會觸發這項事件。事件的結構如下：
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
專家提示：在瀏覽器中查看新的 CDP 變更
如果您想知道 Chrome 如何與開發人員工具進行通訊，可以透過簡單的方法探索內容。
您可以透過「Protocol Monitor」面板查看 Chrome 和 DevTools 之間交換的即時事件，包括新加入的捲動徽章事件。舉例來說，如果修改元素的樣式會影響畫面的捲動功能，您可以在發生時立即查看相關的 CDP 事件。
如需更詳盡的指南，請參閱 Protocol monitor: View and send CDP requests。
捲動畫面之外：推出溢位徽章
更棒的是，我們還將著手打造全新的溢位徽章，找出捲動的原因。這個徽章會顯示在溢出容器的元素旁，協助您快速診斷版面配置問題。
運作方式如下：
- 互動式偵錯。按一下捲動徽章，觸發 DevTools Protocol 指令，以便識別溢出的子項元素。
- 以視覺化方式呈現溢位。我們會在可捲動的容器中對應元素邊界，以便偵測任何溢位情形。
- 找出問題所在。溢位徽章會標示這些溢位元素，點選徽章即可直接在 DOM 中醒目顯示這些元素。
這項工具可讓開發人員瞭解並修正因內容溢位而導致的版面配置問題。我們相信，這項更深入的分析功能將大幅簡化您的偵錯工作流程。