Webページで任意の要素のCSSを調査、スタイルをその場で変更、複数保存、ライブプレビューが可能なブラウザ拡張・「StyleStash」

Ads

StyleStash


StyleStashはWebページで任意の要素のCSSを調査、スタイルをその場で変更、複数保存、ライブプレビューが可能なChromeエクステンションです

任意の要素ピンポイントでDevtoolsのインスペクタが使えて複数スタイルも保存可能、みたいなのです

使ってみたら結構便利でした

Ads

使ってみた

↑ 使ってみました。エクステンションを起動するとWebページの任意の要素のマウスホバーする事で適応されているCSSが表示されます


↑ 編集したい要素をクリックすれば表示されていたCSSがエディターモードに変わりますので編集を加えれば即反映されます


↑ 編集したスタイルはstashボタンで保存できます。スタイルは複数保存できて、後でワンクリックでその要素を保存したスタイルに変更できるようになります

あとは気に入ったスタイルのコードをコピーして利用する、みたいな流れになります。保存したコードはブラウザの設定ページでも一覧で確認出来ます

ブラウザDevtoolsのインスペクタをより手軽にしたようなものでしょうか。勿論、Devtoolsほど応用が利くものでもないので一時的な確認ツールといった用途になりそうです

Google adsなどiframeがあるとフレーム内で起動しちゃう不具合もありましたが地味に便利でした

StyleStash