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

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

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

そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。

Google Chromeでローカルにあるcssファイルを直接編集し保存する。(編集作業の高速化)

● ローカルのフォルダをGoogleChromeに読み込ませる

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の場合)を押すと保存されリロードしてもその状態がリセットされず残っています。

関連エントリー

No.1164
09/18 09:14

edit

css
高速化