Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

やりたいこと

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を使って実現。

スクリーンショット 2018-02-21 08.18.02.png

メリット

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

やり方

  1. Finch Developer Tools をChromeへ追加する
  2. 念のためChromeを再起動する(しなくても動くかも)
  3. 適当なページでDevToolsを開く(⌥Option + ⌘Command + i)
  4. 適当な箇所のCSSを変更してみる(今回は背景色を変更してみた)
    スクリーンショット 2018-02-21 08.23.53.png

  5. [Finch]タブを開くと、先ほどの変更内容が表示されている。
    スクリーンショット 2018-02-21 08.25.36.png

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

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

まとめ

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

ezawa800
UIデザイナー/フロントエンドエンジニアを目指しています。
visasq
ビザスクは「知見と、挑戦をつなぐ」をミッションに、世界で1番のナレッジプラットフォームをつくっています。 様々なニーズにつなぐことで、実際に経験したことで得られた知識や意見を、知見として価値最大化します。組織、世代、地域を超えて、知見を集めつなぐことで、世界中のイノベーションに貢献します。
https://visasq.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away