WEB制作(html・css(スタイルシート))に関する各種メモ書き

Google Chromeでローカルにあるcssファイルを直接編集し保存する

cssファイルを編集するときに Google Chromeのデベロッパーツールで値を変更した後、 エディターにその値を持って行きエディターを使って保存したりしてないでしょうか?

そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。(最新のChromeでは使えなくなりました。代替方法は一番下)

以下の方法でGoogle Chromeを使ってローカルにあるcssファイルを直接編集して保存してみましょう。

● ローカルのフォルダをGoogleChromeに読み込ませる( Chrome Version 62 の場合 )

1. Google Chromeを立ち上げる

2. 右クリックし「検証」を選択する

デベロッパーツールのウィンドウが画面下表示されます

3. デベロッパーツール内メニューの「Sources」を選択する。

4. 右クリックして「Add folder to workspace」を選択する

5. 編集したいcssファイルが入っているフォルダを選択する

● 読み込んだローカルのフォルダ内の css をリンクさせる

6. 直接編集したい ローカルのhtmlファイル をgooglechromeで開く

7. googlechromeで直接編集したいファイルを右クリックし「Map to network resource...」を選択すると

現在ブラウザで開いている同盟のcssファイル一覧が表示されるのでその中からリンクさせたいファイルを選択する

これで準備はokです。 後は自由に編集しその後に「Command+s」(Macの場合)を押すと保存されリロードしてもその状態がリセットされず残っています。

● Finchを使用して変更したCSSの差分を抽出する

ローカルのファイルでは動作しませんので node.js や php などでローカルサーバを立てるといいでしょう。
https://chrome.google.com/webstore/detail/finch-developer-tools/phgdjnidddpccdkbedmfifceiljljgdo

参考: https://liginc.co.jp/web/tool/browser/38012

関連エントリー

No.1164
05/24 11:30

edit

css
高速化