WWW Watch

Firefox Nightly のインスペクタが ::before / ::after 疑似要素を表示するようになった

現在、Firefox Nightly としてリリースされている、Firefox 35 のインスペクタが変更され、::before / ::after 疑似要素を表示するようになりました。

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 35 のインスペクタが変更され、::before / ::after 疑似要素を表示するようになりました。

表示するようになったといっても、インスペクタ上は 「ここに ::before 疑似要素がありますよ」 という感じで表記が出るだけなんですが、それでも表示された ::before / ::after 疑似要素を選択することで、それらに適用されたスタイルや疑似要素自体のボックスモデルを確認したりできるのでとても便利です。

Firefox 35 のインスペクタが ::before 疑似要素を表示した例

ついでに、ある要素に対して JavaScript のイベントリスナが設定された場合、その要素には 「ev」 ってアイコンが付いて、そこからイベントの内容を確認することができるようになったんですね。

これは私がずーっと気がついていなかっただけで、Firefox 33 (現在 Beta チャンネル) から実装されていたようですが、これも便利。

Firefox 35 のインスペクタが 要素に紐付いたイベントを表示した例

あわせて紹介しておくと、同じく Firefox 33 では、スタイルエディタには編集中のスタイルシート内に記述された @media 規則を一覧表示する 「@media サイドバー」 が追加されて、そこから簡単に選択した規則集合にアクセスできるなど、レスポンシブデザインビューと組み合わせた開発やデバッグがやりやすくなっています。

Firefox 35 のスタイルエディタで @media サイドバーが表示された例

ちなみに、イベントリスナの表示機能と、@media サイドバーが追加されている Firefox 33 はそろそろ正式リリースですね。

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー