Web Inspectorの変更 ― StyleパネルUI変更、接頭辞の指摘、Repaintの表示

たまってるWebKit changelogのフィードを消化中…しんどいなあ。mozilla-centralはそこまで多くないから楽なんだけど。Chromiumはフィードがないのもあってかなりしんどい(ほとんど見ないけど)。

というわけでそんな中からWeb Inspector関連の変更を。

Styleパネルの挙動がFirebugと近くなった

Web Inspectorを使い始めて最初にうわあっておもったのが、スタイルの有効/無効を切り替えるチェックボックスがパネルの右端にあったこと。カーソルはプロパティやら値やらの上を通ることが多いのか、右にあるのがとても使いづらかった。今は慣れた。

それがr107933で変わって、チェックボックスが左になった。

やっぱり左のがしっくりくるなあ。
しかしここへ来てかー。Web Inspectorに慣れた人とかはどう思うんだろう。

もうひとつは、クリック1回で編集状態にならないこと。ダブルクリックめんどい。
これはちょっと前から実験的に用意されてた(らしい)んだけど、r108059でそれがデフォルトで有効になった。楽!

Auditsパネルで接頭辞に関する項目が追加

ベンダー接頭辞の議論は読んでるものの、思った以上に意見が増えたり、各々いろんなことを言ってたり、方向性がなかったりで、まとめるのをだいぶ諦めている…。

で、それに関係があったかどうかはしらないけど、r108473でAuditsパネルに接頭辞に関する注意みたいなのが出るようになった。接頭辞なしの正式な構文が実装されてるんだけど、接頭辞つきプロパティのみが書かれてる場合に“Use normal CSS property names instead of vendor-prefixed ones”と出る。

いまだと-webkit-border-radius, -webkit-box-shadow, -webkit-background-sizeとかが対象になるかな。

接頭辞つきのみ、というのがポイントで、古いバージョン用に併記されている場合は出ないらしい。スマートだ。

ただ反応してくれるのはWebKitなものだけなので、たとえば-moz-border-radiusのみとかの場合は無理。Styleパネルだと-moz-なものとかを始め無効な宣言も表示してくれるんだけどなあ…。

Repaintされた要素にボーダーを描画する設定が追加

色が変わったり動いたり何かが生成されたときには再描画が起こる。それを簡単に視覚化できる“Show paint rectangles”という設定がr108330で追加された。チェックしてリンクやらポップアップやらを出してみると枠がつく。

似たような機能はTimelineパネルで用意されている。こっちは--show-paint-rectsっていうフラグをつけて実行(chrome://flagsにあるかもしれない)しないといけないんだけど、タイムラインなのでどこでpaintが起こったかを調べられる。Paul Irishが取り上げてるので、そのポストとスクリーンキャストを見るとわかりやすい。