DevTools の新しいスクロール バッジ: スクロール可能な要素をすばやく見つける

Ionuț Marius Voicilă
Ionuț Marius Voicilă
LinkedIn
Jecelyn Yeen

DevTools の新しいスクロールバッジにより、スクロール関連の問題のデバッグがさらに簡単になりました。この記事では、スクロール可能な要素の概要、スクロール可能な要素を見つけにくい理由、この新機能でスクロール可能な要素をすばやく見つける方法について説明します。また、スクロールバッジの開発の舞台裏もご紹介します。

要素パネルに新しいスクロールバッジを追加。

スクロール可能な要素とは

要素内のコンテンツをスクロールできる場合は、スクロール可能な要素（またはスクロール コンテナ）です。スクロールバーが付いているかどうかは関係ありません。

スクロール可能な要素を見つけにくいのはなぜですか？

スクロールに関する問題のデバッグは困難です。スクロール可能な要素を明確に示すツールがないと、特にスクロールバーがない複雑なページでは、迷子になりやすくなります。

スクロールしている要素を手動で見つけるのは、試行錯誤の面倒なプロセスになる可能性があります。

  1. 要素を選択してスタイルを変更します。
  2. スクロールバーは消えましたか？解決しない場合は、このプロセスを繰り返します。

スクロール バッジの導入

Chrome 130 では、[要素] パネルの新しいスクロールバッジを使用して、スクロール可能な要素を見つけることができます。

要素パネルに新しいスクロールバッジを追加。

たとえば、次の例では、新しいスクロール バッジを使用してスクロールバーが表示される原因となっている要素を探してみてください。

新しいスクロール バッジの技術的な実装

実装は次の 2 つの部分に分かれています。

  • スクロール可能な要素の特定。Blink’s（Chrome のレンダリング エンジン）シグナルを使用して、スクロール可能な要素、またはページの変更によりスクロール可能になった要素を特定します。
  • スクロールバッジの表示。シグナルを受信すると、[要素] パネルのスクロール可能な要素の横に、新しいバッジ（既存のグリッド バッジに似ています）が表示されます。

スクロール可能な要素の特定

スクロール可能な要素を特定するには、Blink の IsUserScrollable メソッドを使用します。このメソッドは、X 軸または Y 軸のいずれかでオーバーフローしているかどうかを確認することで、ノードがスクロール可能かどうかを判断します。これは、コンテンツがコンテナのサイズを超えており、スクロール可能であることを示します。このメソッドは、DevTools で新しい要素が読み込まれるたびに呼び出され、スクロール可能なコンテナを特定します。

すでに読み込まれている要素のスクロール可能状態を動的に更新するには、Blink レンダリング エンジンのコードベースを詳しく調べて、ノードのスクロール可能領域が追加または削除される場所を追跡する必要がありました。

オーバーフローを処理するコアロジックは、PaintLayerScrollableArea コンポーネントによって管理されます。具体的には、UpdateScrollableAreaSet メソッドはオーバーフローが発生したか、または解決されたタイミングを検出します。

この情報は、ScrollableArea を変更したノードの参照を送信することで、DevTools バックエンドにリレーされます。

バックエンドは、IsUserScrollable メソッドを使用してノードを再チェックし、新しい状態を取得します。スクロール可能であることを確認した後、Chrome DevTools Protocol を使用してフロントエンドにシグナルが送信され、スクロール可能なコンテンツの変更が UI に正確に反映されます。

スクロールバッジを表示する

DevTools フロントエンドに新しいバッジを追加するため、ElementsTreeOutline にハンドラ メソッドを作成しました。このメソッドは、イベントによってスクロール可能状態を変更した要素の nodeId を受け取ります。このハンドラで、nodeId を使用して ElementsTreeElement オブジェクトを取得し、スクロールバッジを更新するように指示します。

スクロールバッジを更新するには、要素がスクロール可能かどうか、すでにスクロールバッジが付いているかどうかを確認する必要があります。これらの条件に基づいて、次のアクションが行われます。

  • 要素がスクロール可能で、スクロールバッジがまだない場合は、スクロールバッジが追加されます。
  • 要素がスクロール可能ではなく、スクロールバッジがある場合、既存のバッジは削除されます。

スクロール可能なトップレベル ドキュメントを処理する特別なロジック

最上位のドキュメントがスクロール可能である場合は、メインドキュメントの #document 要素は iframe の場合にのみ表示されるため、特別なケースがあります。そのため、#document 要素にバッジを直接表示することはできません。

代わりに、document.scrollingElement() が <body> または null を返す Quirks mode 内の要素を含む、</html> 要素にスクロールバッジを表示することにしました。この決定により、スクロール可能なドキュメントとスクロール可能な本文要素の混同を防ぐことができます。特に、本文を個別にスクロールできるページでは、混同を防ぐことができます。

スクロール可能な要素をデベロッパーに明確に示すには、これが最適な方法であると判断しました。

[要素] パネルの HTML タグの横にあるスクロール バッジ。

Chrome DevTools Protocol（CDP）の変更

新しいスクロール バッジを統合するには、Chrome DevTools Protocol (CDP) に変更を加える必要がありました。CDP は、DevTools と Chrome 間の通信プロトコルとして機能します。

以下の 2 つのケースに対応するため、プロトコルを変更する必要がありました。

  • このノードは、DevTools で読み込まれたときにスクロールできますか？
  • このノードのスクロール可能な状態が更新されましたか？
このノードが DevTools に読み込まれたときにスクロールできますか？

isScrollable という名前の新しいプロパティを DOM.Node データ型に追加しました。このプロパティは、DevTools フロントエンドで新しいノードが読み込まれるたびに送信されます。

このプロパティは、不要なデータを読み込まないように、true の場合にのみ設定するようにしました。そのため、このプロパティが送信されていない場合、要素はスクロールできないとみなされます。

このノードはスクロール可能な状態を更新しましたか？

ノードがスクロール可能な状態を更新したかどうかを検出するため、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 が DevTools と通信する方法を確認するには、簡単な方法があります。

[プロトコル モニタ] パネルでは、Chrome と DevTools 間でやり取りされるリアルタイム イベント（スクロールバッジに新しく追加されたイベントなど）を確認できます。たとえば、スクロール可能かどうかに影響する要素のスタイルを変更すると、関連する CDP イベントがすぐに表示されます。

詳細なガイドについては、Protocol monitor: View and send CDP requests をご覧ください。

要素パネルに新しいスクロールバッジを追加。

スクロールを超えて: オーバーフロー バッジの導入

さらに、スクロールの原因を特定するための新しいオーバーフロー バッジの開発も進めています。このバッジはコンテナにオーバーフローする要素の横に表示され、レイアウトの問題をすばやく診断するのに役立ちます。

仕組みは次のとおりです。

  • インタラクティブ デバッグ。スクロール バッジをクリックすると、オーバーフローする子要素を識別する DevTools プロトコル コマンドがトリガーされます。
  • オーバーフローの可視化。スクロール可能なコンテナ内の要素の境界をマッピングして、オーバーフローを検出します。
  • 原因をハイライト表示する。オーバーフロー バッジは、このようなオーバーフロー要素にフラグを立て、クリックすると DOM で直接ハイライト表示されます。

これにより、コンテンツのオーバーフローによって発生するレイアウトの問題を把握して修正するための強力な新しいツールがデベロッパーに提供されます。この詳細な分析により、デバッグ ワークフローが大幅に効率化されると考えています。