Chrome Devtools から消されそうになってる Layers パネルに救いの手を
要約
Google Chrome の Devtools で z-index の重なり順や画面外にはみ出している
要素の状態などを確認できる、 Layers パネルが近い将来のバージョンで廃止されそうになっています。
まだ最終決定ではないため、ぜひコメントでご意見やご感想をお聞かせくださいとの事。
Layers パネルの恩恵を受けている開発者の皆さん、ぜひコメントで
Chrome 開発チームに意見をぶつけてみてください。
なぜ廃止されそうになっているのか
Why are we doing this
This feature has very low usage among developers.
This feature doesn't work reliably for years with several bugs.
- あまり使われてない
- 昔からのバグが残っている
確かに。確かにバグってるなと感じる面はいくつかあるのですが、
それよりも何よりも一番気になるのは ・・・この神機能が「あまり使われていない」・・・だと！？
という事です。
というわけでぜひこの記事を通して Layers パネルについて軽く知っていただき、
この問題に興味を持っていただけたら幸いです。
パネルの表示方法
Chrome 125 をベースに説明します
- まずは何はともあれ Chrome を起動します
- Devtools を起動します
- 右上の三点リーダから 「More tools」 → 「Layers」 の順に選択します
Layers パネルの基本的な使い方
- ページを開いた状態で Devtools から先ほど表示した Layers を選択します。
- 「Paints」チェックボックスを ON にします。
- ２と同じ並びに、上下左右の方向を移動するボタン、
画面を回転させるボタンなどあるので使いながら調節してみてください - Web ページ側の画面を操作すると、連動して Layers パネルの内容も動きます
これだけでも動作しているページ全体を俯瞰できるのでありがたい機能だと言えます。
なにがうれしいのか？
Viewport 外のレンダリング状況を知る事ができる
iPhone15 の LP をベースに説明します。
使い方の項目で説明した通り iphone15 のページを開くと、
2ページ目に横にスライドするカルーセルが表示されるかと思います。
この部分を Layers パネルで見てみましょう
気づきましたか？
Viewport の外側でどのようにレンダリングが行われているのかを知る事ができる のです。
次に、ページを縦にスクロールしてみると、
Viewport に近い位置だけ画像や動画などのコンテンツが
レンダリングされている様子がうかがえます。
パフォーマンスを重視した実装をする場合、
往々にしてこのようにメモリを開放しながら必要な部分だけを
レンダリングする必要性に迫られるのですが、
それが実際に動作している様子が確認できるのは、開発者にとって
メリット以外の何物でもないと言えるのではないでしょうか？
z-index の重なり順を視覚的に知ることができる
次に、YouTube のトップページを見てみます
これだけではまだ何もわかりませんね。
Layers パネルの左上に、矢印が一周したようなアイコンがあるのでクリックします。
Devtools に表示されている画面を上下左右にドラッグすると、画面上の各 UI が
重なっている様子が見えるでしょうか？
では、次にページのヘッダ部分を右クリックし、 「Reveal in Elements Panel」 をクリックします。
選択した要素が Elements パネルでどの位置に存在するのか簡単に知る事ができました。
次に、この要素の z-index を Elements パネルから操作し、1 に変更します。
ヘッダが左のサイドバーより下に表示されているのが視覚的にわかりやすくなりました。
ちなみにこの状態のページはこちら。
パッと見た感じ、ヘッダの一部が消えたかのように見えます。
もちろん実際の開発中は Element パネルから存在確認ができるため、
間接的に状況を知る事はできますが、
やはり視覚的に状況がわかりやすい、というのは大変助かります。
気付かない間に、浮いている要素の下や Viewport の外側に
不要な要素をレンダリングしてしまっていないか、チェックする意味でも
この機能は非常に重要なのです。
また、他にも Profiler という機能もありますが今回は触れません。（私の理解が浅いので説明できない）
どんなバグがあるのか
バグの一覧はこちら
2024年5月末時点では担当者未割り当てのバグが3件
割当済みバグが4件という事でした。
一通り読んでみた限り、自分の環境では起きていないような現象ばかりだったので、
ここはあまりピンと来ていません。
それよりも、個人的には Layers パネルを使用し続けていると（筆者の PC で 10 分程）動作が
非常に重くなってくる点が問題だと思います。
もしかしたら割当済みのどれかがこの問題を指しているのかもしれませんが、
重くなってきたなと感じたらすぐさま一度 Devtools を閉じて、
再度開くという事をしなければなりません。開発中これを繰り返すのは大変です。
閉じ忘れると非常に重くなって最終的には Chrome ごと再起動を余儀なくされます。
しかしViewport 外のページの状態を視覚化でき、UI の重なり順を視覚化できるのはそれを補って余りあるメリットだと確信しています。
おわりに
ご興味わいていただけたでしょうか？
この機能に今まで助けられてきた皆さん、
Layers パネル今知ったけどめっちゃ便利やんって思ってくれた皆さん
この機能が消えちゃうの、もったいないと思いませんか？
個人的には、新しい機能として発展的に開発し直すにしても、それまでは残しておいてほしいものです。
Discussion