【Chrome】z-indexを考慮した立体的なページレイヤーをChromeの開発者ツールで確認する。

メモとして残します。

先日z-indexが原因でボタンが押下できる判定が小さくなったという、事象を解決するのに時間がかかったため、こんなことにならないようにz-indexを考慮したページ全体を立体的に確認することができるプラグインないかなーと思ったら、chromeの標準機能でありました。

やり方

F12でchromeの開発者ツール出して
Ctrl＋Shift＋Pでlayerメニュー出して、
「show layer」を選択すると立体的にz-indexを考慮したページレイヤーが見れます。

グラブルwebバージョンで確認してみるとこんな感じ

グラブルはレイヤー綺麗ですね。。。

以上。