Viewport や Scroll の外側がどうなっているのかを確認する方法

Published: 2022/2/20


例えば swiper であったりだとかの、 viewport の外側を利用するようなライブラリを利用していたり、 overflow: scroll を活用するようなコードを書いていると、今ブラウザ上で見えている範囲だけでは、デバッグが難しいことがある。 そのような場合に、それら Viewport の外側であったりとか、 overflow によって見えなくなっている部分がどうなっているのかを 確認したくなるが、その方法についてのメモ。

方法: Chrome DevTools の Layers を使う。

Chrome には、今、描写されている各 formatting context block (おそらく) を表示する機能がある。 DevTools を開き、 ⋮ -> More Tools -> Layers からそのタブを表示させることができる。

Layers の表示方法

例えば下記は冒頭で述べた swiperjs で Layers を表示させてみたスクリーンショットであるが、見ての通り、ビューポートの右側に、次のスライドたちが隠されているのが分かる。

swiperjs.com で Layers を開いてみた際の画像

参考


Tags: cssgoogle-chrome-devtools

関連記事

About

エンジニアです。 仕事では Xincere Residence を作っています。 このサイトは個人のブログであり、所属団体の意見等とは関係がありません。

Tags