4.3 Workspaces（双方向同期）

Workspacesとは

通常、DevToolsでCSSやJavaScriptを変更しても、ページをリロードすると変更は失われる。Workspacesを設定すると、DevToolsがローカルファイルシステムと接続され、変更が自動的にソースファイルに保存される。

手動セットアップ

最も基本的な設定方法。任意のプロジェクトフォルダをDevToolsに追加する。

設定が完了すると、Workspaceタブにフォルダが表示される。ファイル名の横に●緑のドットが表示されれば、ネットワークリソースとローカルファイルのマッピングが成功している。

自動セットアップ（devtools.json）

Chrome M-135以降では、設定ファイルを配置するだけでWorkspacesを自動的に接続できる。チーム開発での設定共有に便利。

設定ファイルの作成

プロジェクトルートに以下のディレクトリとファイルを作成する：

プロジェクト/
├── .well-known/
│   └── appspecific/
│       └── com.chrome.devtools.json
├── index.html
├── css/
└── js/

com.chrome.devtools.jsonの内容：

{
  "workspace": {
    "root": "C:/Users/user/projects/my-app",
    "uuid": "8f6e3d9a-4b7c-4c1e-a2d5-7f9b1e3c1384"
  }
}

UUIDの生成方法

UUIDはオンラインジェネレータやコマンドで生成できる：

# PowerShell
[guid]::NewGuid().ToString()

# Python
python -c "import uuid; print(uuid.uuid4())"

# Node.js
node -e "console.log(require('crypto').randomUUID())"

自動接続の動作

1. ローカルサーバーを起動（localhostでアクセス可能にする）
2. DevToolsを開くと、自動的に/.well-known/appspecific/com.chrome.devtools.jsonをリクエスト
3. 設定ファイルが見つかると、Sourcesパネル → Workspaceタブに「Connect」ボタンが表示
4. 「Connect」をクリックし、フォルダアクセスを許可

Workspacesの使い方

CSSの編集と保存

CSSの変更は即座にページに反映され、同時にファイルにも保存される。

JavaScriptの編集と保存

JavaScriptの変更はファイルに保存されるが、実行中のコードには即座に反映されない。

HTMLの編集

HTMLはSourcesパネルで直接編集する。Elementsパネルでの変更は保存されない。

Workspaces設定

DevTools設定画面でWorkspacesの動作をカスタマイズできる。

Folder exclude pattern

Workspaceから除外するフォルダやファイルを正規表現で指定。デフォルトではnode_modules、.git、ビルド出力フォルダなどが除外されている。

// デフォルトの除外パターン例
node_modules/
bower_components/
\.git/
\.sass-cache/

接続の解除

Sourcesパネル → Workspaceタブ → フォルダを右クリック → 「Remove from workspace」を選択。

実践的なTips

マッピングが機能しない場合

• ローカルサーバーのルートディレクトリとWorkspaceのフォルダが一致しているか確認
• ファイルパスが完全に一致しているか確認（大文字小文字も含む）
• DevToolsを閉じて再度開く
• Chromeを再起動する

複数プロジェクトの管理

Settings → Workspaceで複数のフォルダを登録できる。プロジェクトごとに異なるWorkspaceを設定し、切り替えて使用可能。

Source Mapsとの連携

モダンフレームワーク（React、Vue、TypeScriptなど）ではSource Mapsが自動生成される。WorkspacesはSource Mapsを認識し、ビルド後のコードから元のソースファイルにマッピングできる。これにより、minifyされたコードではなく、読みやすい元のコードを編集できる。

Local Overridesとの違い

Workspacesと似た機能にLocal Overridesがある。目的と使い方が異なる。

開発中のプロジェクトにはWorkspaces、外部サイトのデバッグや実験にはLocal Overridesを使う。詳細は次のページで解説。