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

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

方法: Chrome DevTools の Layers を使う。

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

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

参考

Look outside of the viewport with Chrome developer tools

Is there any way for me to see content outside of the browser's normal viewport with the chrome developer tools? I'm moving an item outside of the browser's view, but I want to see exactly how far ...

stackoverflow.com