マウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張・「CSS Spider」

Ads

CSS Spider


CSS Spiderはマウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張です。

起動するとマウスホバーで要素のCSSを自動解析し、その場にclassやID名、フォント、要素の長さと設定されているスタイルを表示してくれます。

表示されたポップアップからはCodopenにそのCSSコードを送ったりコピーする事が出来ます。コピーは押しても何の反応もありませんが、クリップボードにはコピーされてました。

Ads


また、上図のように表示されたCSSはその場で変更、スタイルを確認する事も出来るようになっています。

変更した場合、Codopenに送るコードも変更後のものになります。技術的にはブラウザのインスペクタと同じ方法で設計してるとの事です。

オフラインでも機能しますので開発のサポートにも良いかもしれませんね。

CSS Spider