mh通常、DevToolsで編集したCSSやJavaScriptの変更は、一時的なものにすぎずブラウザを更新すると消えてしまいます。
しかし、Chromeのワークスペース機能を活用すれば、ローカルファイルとブラウザを双方向に同期でき、編集内容をそのままファイルに反映させることが可能になります。
この章では、DevToolsでライブ編集した変更を即座に保存し、開発に活用する手順を解説します。
12.1 ローカルファイルと連携するワークスペース設定
ワークスペースとは？
- DevToolsからローカルファイルシステムにアクセスし、直接編集・保存できる機能
- 一時的な編集ではなく、本番コードの反映・テストにも活用可能
設定手順：
- DevTools を開く →「Settings（歯車アイコン）」→「Workspace」タブ
- 「Add folder…」をクリックして、ローカルのプロジェクトフォルダを選択
- Chromeにフォルダアクセスを許可するダイアログが表示されたら「許可」
- 対象サイトのドメインと、ローカルのファイルパスをマッピングする（「Sources」パネル上で設定）
できること：
- 編集したCSSやJSが即座にローカルファイルに保存
- 保存後にページをリロードすると、編集が反映された状態で表示
- エディタを切り替えることなく、その場でブラウザとコードを連携
💡ユースケース：
- CSSのマージン調整をリアルタイムで確認しつつ、本番コードに反映
- JSの一部ロジックを修正し、保存 → リロードして動作確認
- チーム開発中でも、ステージング環境とローカル編集を並行してテスト
12.2 編集したCSS/JSの保存と反映
ライブ編集の流れ：
Sourcesパネルから、連携されたファイル（ローカル）を開く- コードを編集 →
Cmd+S/Ctrl+Sで保存 - ブラウザに即座に反映（多くの場合、リロード不要）
注意点：
- HTMLファイルの編集はサポートされていない（基本は静的ファイルが対象）
- 自動ビルドやバンドラー（Webpack など）を使っている場合、ソースマップの対応が必要
- セキュリティ上の理由で、Chromeからファイルへの書き込みを明示的に許可する必要がある
🧪 実践課題
課題：DevToolsのワークスペース機能を使って、スタイルのライブ編集を行ってみよう
- テスト用のローカルHTML/CSSプロジェクトを用意
- Chrome DevToolsで「Workspace」にそのフォルダを追加
style.cssを開き、フォントサイズ・色などを編集- ブラウザ上で即座にスタイルが変わることを確認
- ファイルがローカルに保存されているか確認
📝 まとめ
- ワークスペース機能を使えば、DevToolsとローカルファイルをリアルタイムで連携
- 開発の試行錯誤をスピーディに行いながら、そのまま本番コードに反映できる
- 特にスタイル調整やフロントエンド開発において、強力な時短ツールとなる
