🔊 Play

通常、DevToolsで編集したCSSやJavaScriptの変更は、一時的なものにすぎずブラウザを更新すると消えてしまいます。
しかし、Chromeのワークスペース機能を活用すれば、ローカルファイルとブラウザを双方向に同期でき、編集内容をそのままファイルに反映させることが可能になります。

この章では、DevToolsでライブ編集した変更を即座に保存し、開発に活用する手順を解説します。

---

12.1 ローカルファイルと連携するワークスペース設定

ワークスペースとは？

• DevToolsからローカルファイルシステムにアクセスし、直接編集・保存できる機能
• 一時的な編集ではなく、本番コードの反映・テストにも活用可能

設定手順：

1. DevTools を開く →「Settings（歯車アイコン）」→「Workspace」タブ
2. 「Add folder…」をクリックして、ローカルのプロジェクトフォルダを選択
3. Chromeにフォルダアクセスを許可するダイアログが表示されたら「許可」
4. 対象サイトのドメインと、ローカルのファイルパスをマッピングする（「Sources」パネル上で設定）

できること：

• 編集したCSSやJSが即座にローカルファイルに保存
• 保存後にページをリロードすると、編集が反映された状態で表示
• エディタを切り替えることなく、その場でブラウザとコードを連携

💡ユースケース：

• CSSのマージン調整をリアルタイムで確認しつつ、本番コードに反映
• JSの一部ロジックを修正し、保存 → リロードして動作確認
• チーム開発中でも、ステージング環境とローカル編集を並行してテスト

---

12.2 編集したCSS/JSの保存と反映

ライブ編集の流れ：

1. Sourcesパネルから、連携されたファイル（ローカル）を開く
2. コードを編集 → Cmd+S / Ctrl+S で保存
3. ブラウザに即座に反映（多くの場合、リロード不要）

注意点：

• HTMLファイルの編集はサポートされていない（基本は静的ファイルが対象）
• 自動ビルドやバンドラー（Webpack など）を使っている場合、ソースマップの対応が必要
• セキュリティ上の理由で、Chromeからファイルへの書き込みを明示的に許可する必要がある

---

🧪 実践課題

課題：DevToolsのワークスペース機能を使って、スタイルのライブ編集を行ってみよう

1. テスト用のローカルHTML/CSSプロジェクトを用意
2. Chrome DevToolsで「Workspace」にそのフォルダを追加
3. style.css を開き、フォントサイズ・色などを編集
4. ブラウザ上で即座にスタイルが変わることを確認
5. ファイルがローカルに保存されているか確認

---

📝 まとめ

• ワークスペース機能を使えば、DevToolsとローカルファイルをリアルタイムで連携
• 開発の試行錯誤をスピーディに行いながら、そのまま本番コードに反映できる
• 特にスタイル調整やフロントエンド開発において、強力な時短ツールとなる