Chrome用とFirefo用です。
GitHubでソースコード公開してます。
見た目
Chrome版。
Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。
はじまり
コードスニペット版。これはこれで手軽でよろしいね。
Chrome版について
Elementsパネル内に “z-index” ペインを追加し、一覧を表示します。セレクターをクリックすると要素を選択するので、スタイルの詳細を確認できます。
ツールバーに追加されるアイコンはいらないので、右クリックから非表示にするのが良いと思います。
最初から出さないやり方もあるのかな。
Firefox版について
DevToolsに “z-index” パネルを追加し、一覧を表示します。セレクターをクリックするとInspector (Elements) パネルへ移動し要素を選択するので、スタイルの詳細を確認できます。たまに時間がかかることがあるけどよくわからない。
パネル vs ペイン
本当はChrome同様Elementsパネル内に表示したかったけど、できなかったので独立パネルになってます。
できなかった理由は二つあって、まず第一にペインにHTMLを追加するAPI setPage() がなかったこと。自由な項目が設置できない。
第二には、でもまあ見た目はアレだけどあんま気にしないにしよう思って、オブジェクトを表示する setExpression() を試した。ところが、これなんか中身が長いときにはみ出してスクロールもしないので、上位数件しか見えないっていう……。
setExpression() で出力した例。スクロールせず、全体を見ることができない。何か良いやり方があれば教えてください。
今後の予定
更新の予定はないけど、脳内の構想としてはこんな感じ。
- 要素をセレクターだけで検索するので、同じセレクターが複数あるとき選択が不正確なのを修正
- スタックコンテキストとかも表示
style属性で指定されている場合セレクターに反映- アイコンとかそこら辺をアレする
気が向いたらやる感じです。欲しい機能あれば言ってくれると気が向いてくるかもしれません。
z-indexを減らそう！
ちゃんと設計してれば2桁もあれば相当余るはずなので、むやみに z-index: 999999 とか z-index: 2147483647 とかやめましょう。
よしCodeGridを読もう！
あとGitHubのほうでスターください！