DevToolsでz-index一覧できるやつ作ったよ。

Chrome用とFirefox用です。

GitHubでソースコード公開してます。

• ginpei/devtools-z-index

見た目

Chrome版。

Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。

はじまり

コードスニペット版。これはこれで手軽でよろしいね。

ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel

— 高梨ギンペイ (@ginpei_jp) June 11, 2018

Chrome版について

• https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/

Elementsパネル内に “z-index” ペインを追加し、一覧を表示します。セレクターをクリックすると要素を選択するので、スタイルの詳細を確認できます。

ツールバーに追加されるアイコンはいらないので、右クリックから非表示にするのが良いと思います。

最初から出さないやり方もあるのかな。

Firefox版について

• https://addons.mozilla.org/en-US/firefox/addon/devtools-z-index/

DevToolsに “z-index” パネルを追加し、一覧を表示します。セレクターをクリックするとInspector (Elements) パネルへ移動し要素を選択するので、スタイルの詳細を確認できます。たまに時間がかかることがあるけどよくわからない。

パネル vs ペイン

本当はChrome同様Elementsパネル内に表示したかったけど、できなかったので独立パネルになってます。

できなかった理由は二つあって、まず第一にペインにHTMLを追加するAPI setPage() がなかったこと。自由な項目が設置できない。

第二には、でもまあ見た目はアレだけどあんま気にしないにしよう思って、オブジェクトを表示する setExpression() を試した。ところが、これなんか中身が長いときにはみ出してスクロールもしないので、上位数件しか見えないっていう……。

何か良いやり方があれば教えてください。

今後の予定

更新の予定はないけど、脳内の構想としてはこんな感じ。

• 要素をセレクターだけで検索するので、同じセレクターが複数あるとき選択が不正確なのを修正
• スタックコンテキストとかも表示
• style 属性で指定されている場合セレクターに反映
• その場で z-index を更新してプレビュー（ElementsパネルのStylesペインみたいな）
• アイコンとかそこら辺をアレする

気が向いたらやる感じです。欲しい機能あれば言ってくれると気が向いてくるかもしれません。

z-indexを減らそう！

ちゃんと設計してれば2桁もあれば相当余るはずなので、むやみに z-index: 999999 とか z-index: 2147483647 とかやめましょう。

よしCodeGridを読もう！

• z-index再入門 – z-indexの仕組み | CodeGrid

あとGitHubのほうでスターください！