SnipCSS
SnipCSSは閲覧しているWebページの任意の要素を選択すると、その要素に使われているHTMLとCSSを検出してjsfiddleのようなエディタで確認できるChromeエクステンションです。
ブラウザのDevtoolsで確認するのとは別の用途で便利そうなエクステンションですね。他サイトの調査やデバッグに役立ちそうです。
というわけで使ってみました。
使い方
使い方は簡単なので説明するまでも無いと思うんですが、WebページでSnipCSSを起動すると要素を選択できるようになるので選択します。
すると上図のようにRun SnipCSSというボタンが出るのでクリックすれば下図のようにjsfiddleのようなエディタに飛ばしてくれます。(JSのエリアはありません)
あとは動作テストするなりデバッグするなり参考にするなり、といった感じです。デスクトップアプリも用意されているみたいですね。無料版ではある程度制限がありますが有償版だともっと便利になるそうです。
