chromeデベロッパー・ツールを使ったコーディングって爽快ですよね。サーバーにファイルを上げる必要なくリアルタイムで見た目を確認できるので、超スピーディー。
しかし、あくまでページの表層を擬似的に変更するにすぎないため、ページをリロードすると加えた変更は元に戻ってしまいます。 保存には「ある程度コーディングしたら手動で全コピー」→「ローカルファイルを上書き」という作業を繰り返すんですが、ちょいちょい操作ミスして作業履歴が時空の彼方に消えるんですよね…（；_；）

で、改めてChromeデベロッパー・ツールの公式マニュアルを読んだところ、ローカルファイルを直接変更・保存しながらコーディングする方法を知りました。（今更！）
もっと早く読んでおけばよかった。というわけで、方法を記します。

1.ローカルフォルダをSourceパネルの左カラムに追加する

chromeを開き、F12、またはCtrl+Shift+iでデベロッパーツールが起動します。
デフォルトだとElementsパネルが開き、DOMツリーが表示されています。 Sourceパネルに切り替え、「左カラム：読み込み中のCSSやjsなどのファイルリスト/右カラム：その編集画面」を開きましょう。
この画面でリアルタイムコーディングができるわけですが、デフォルトの設定ではこの編集をどこにも保存できません。

そこで、左カラムの何もないところで右クリックし、「Add Folder to Workspace」を選択します。

すると、ローカル上のフォルダが表示されます。編集したいファイルが入ったフォルダを選択します。

「ローカルと直接つないじゃうけどOK？機密情報とか大丈夫？」っていうアラートが出るので、「許可」を選択。
ローカルフォルダがデベロッパー・ツール上に追加されました！

ステージングされたファイル群は、リロードしてもChrome自体を開きなおしてもそのまま。消えません。おー。

2．追加したローカルファイルをサーバー上のファイルと置き換え、マッピングする

まだページはサーバー上のファイルを読み込んでいる状態です。追加したローカルファイルを編集してもページの外観は何も変わりません。 ステージングしたファイルを、サーバー上のファイルと置き換え読み込ませる作業が必要になります。

任意のファイルを右クリックし、「Map to network resources」を選択。 すると、ページが読み込んでいるファイル一覧が出てくるので、置き換えたいファイルを選択しましょう。

あ、ローカルファイルと置き換えるファイルは、当然同じ名前じゃないとダメです。 この場合、書き換えているのはCSSファイルのみ。読み込み元のHTMLは変更していないため、同じ名前にしないとページとかみ合いません。

というわけで、ローカル上の「object.css」をサーバー上ファイルの代わりに読み込ませてみました。

3.ローカルファイルを直接変更し、保存

これで、リアルタイムコーディングを直接ローカルファイルに保存できる状態になりました。
セクションの背景色を#fffから#000に書き変えてみます。こんなかんじ。

ショートカットCtrl+sで保存します。すると、ローカルファイルが実際に書き換わります！これは便利＆はやい！

4.chromeデベロッパー・ツールからローカルファイルを切り離し、元に戻す

作業が終了したら、ローカルファイルへのアクセスを解除して元に戻しましょう。
ステージングしたフォルダを右クリックし、「remove files from workspace」を選択。 本当にいいですか？とアラートが出るので、OKを選択してChrome上からローカルファイルを下げます。

ページ表示も元通りになりました。

注意とまとめ

この方法は、ファイルがどんどん上書きされます。オリジナルファイルが上書きされると困る場合は、いったんフォルダを別の場所にコピーし、そちらをchromeと繋げるといいみたいです。
chromeデベロッパーツールをフル活用すれば、もっともっとコーディングをスピードアップできそう。積極的に使っていきます～。