Chrome DevToolsで変更したCSSを保存する方法

やりたいこと

Chrome DevTools上でデザインを調整した後、その内容を保存したい。

問題点とか

以前はローカルファイルを直接書き換えるようにできたが、調べた範囲だと今はできなくなった模様。
参考： http://ys.moon-sky.net/usage-css-mapping-on-workspace/

そもそも、CSSを直接書き換えても、SCSSやCSSinJSなどに再度書き直さないといけないので、ローカルにあるCSSを変更するのではなくて、変更した内容をCSSファイルに書き出して欲しい。

Finch Developer Toolsを使おう

Finch Developer Tools というChrome Extensionを使って実現。

メリット

• DevTools上でのCSS変更内容をダウンロードできる
• 差分表示されるので変更点がわかりやすい
• 間違えてブラウザをリロードしてしまっても変更内容が消えない

やり方

1. Finch Developer Tools をChromeへ追加する
2. 念のためChromeを再起動する（しなくても動くかも）
3. 適当なページでDevToolsを開く（⌥Option + ⌘Command + i)

4. 適当な箇所のCSSを変更してみる（今回は背景色を変更してみた）
   

5. [Finch]タブを開くと、先ほどの変更内容が表示されている。
   

6. 後は変更内容を見ながら元ファイルを編集するなり、そのままダウンロードして保存しておくなり。

7. ブラウザをリロードしても変更内容は消えないので、右上のFinchアイコンから[Clear Changes]をクリック
   

まとめ

これでインブラウザデザインが捗る！気がする。
DevToolsの標準機能でも出来るよ！という情報があれば是非コメントをください。