このページは Cloud Translation API によって翻訳されました。

Chrome DevTools でのワークスペースの自動接続

ワークスペースは、Chrome DevTools 内からウェブサイトのソースファイルを直接編集できる強力な機能です。この機能を使用すると、コードエディタとブラウザを頻繁に切り替える必要がなくなります。

概要

Chrome DevTools の Workspace は、ウェブサーバーによって提供されるファイルをパソコンのローカルフォルダ内のファイルにマッピングします。ローカルプロジェクトでワークスペースを有効にすると、DevTools の [ソース] パネルでファイルに加えた変更は、ローカルプロジェクトファイルに自動的に保存されます。これにより、シームレスな編集が可能になり、DevTools のリアルタイムの分析情報を活用しながら、プロジェクトのコードベースを直接操作しているような感覚で作業できます。

ワークスペースの自動接続のメリット

ワークスペースの自動接続により、手動構成が不要になり、ワークスペースの設定が強化されます。プロジェクトフォルダを DevTools に手動で追加する代わりに、ローカル開発サーバーで特別な devtools.json ファイルを提供し、Chrome DevTools で自動的に検出することもできます。これには次のようなメリットがあります。

デバッグの高速化: DevTools でファイルを編集すると、ブラウザを離れたり手動で保存したりすることなく、更新がすぐに反映されます。
リアルタイムの変更: 変更はローカルファイルとブラウザにすぐに反映されるため、開発速度が向上します。
手動設定不要: プロジェクトファイルのマッピングを自動化し、特に新しいプロジェクトやチームメンバーのオンボーディング時に設定時間を短縮します。

ワークスペースの自動接続の仕組み

ワークスペースの自動接続は、ローカル開発用サーバーが特定の JSON ファイルを事前定義されたパスで公開することで機能します。Chrome DevTools が開いていて、localhost から配信されたウェブサイトを操作している場合、次の宛先にリクエストが自動的に送信されます。

/.well-known/appspecific/com.chrome.devtools.json

サーバーが有効な devtools.json ファイルで応答すると、DevTools はそのファイル内の情報を使用して、プロジェクトのソースフォルダに自動的に接続します。通常、devtools.json ファイルには次のものが含まれます。

{
  "workspace": {
    "root": "/Users/yourname/path/to/your/project",
    "uuid": "a-random-version-4-uuid"
  }
}

workspace.root: ローカルファイルシステム上のプロジェクトのルートディレクトリの絶対パス。
workspace.uuid: プロジェクトの固有識別子（UUID v4）。これにより、デベロッパーツールでさまざまなプロジェクトを区別できます。

DevTools がこのファイルを受信して処理すると、[Sources] > [Workspaces] パネルに [Connect] ボタンが表示されます。

ローカルでの開発とデバッグ向けに設計

devtools.json による自動ワークスペース検出メカニズムは、ローカル開発環境専用に設計されており、アプリケーションが localhost から提供されている場合にのみ機能します。Chrome DevTools は、ローカルプロジェクトをデバッグしている開発モードでのみ /.well-known/appspecific/com.chrome.devtools.json リクエストを送信します。この機能は、本番環境を対象としていません。

ローカルファイルへのアクセス権を付与する

セキュリティ上の理由から、Chrome では、ウェブサイトがローカルネットワークまたはマシン上のファイルにアクセスするには、ユーザーの明示的な権限が必要です。DevTools が devtools.json を使用してローカルプロジェクトに接続しようとすると、Chrome がプロジェクトのディレクトリにアクセスするための権限を付与するよう求められます。この権限リクエストは、権限が付与されない限り、パブリックネットワークからローカル宛先へのリクエストを制限する Chrome のローカルネットワークアクセスポリシーに準拠しています。この権限をリクエストできるのは、安全なコンテキスト（HTTPS）のみです。ローカル開発の場合、通常は localhost が安全なコンテキストとして扱われることを意味します。

`devtools.json` ファイルを作成して提供する

ローカル開発サーバーで実行される一般的なフロントエンドプロジェクトでは、/.well-known/appspecific/com.chrome.devtools.json リクエストに正しい JSON コンテンツで応答するようにサーバーを構成する必要があります。

一般的なアプローチは次のとおりです。

UUID を生成する: UUID v4 が必要になります。オンラインツールまたはスクリプトを使用して生成できます。
プロジェクトのルートを特定する: プロジェクトのルートディレクトリの絶対パスを取得します。
エンドポイントを作成する: /.well-known/appspecific/com.chrome.devtools.json への GET リクエストを処理するように開発サーバーを構成します。
JSON を提供する: このエンドポイントにアクセスされたら、Content-Type: application/json ヘッダーと devtools.json コンテンツを含む JSON レスポンスを提供します。

devtools.json ファイルで指定する workspace.root パスは、ローカルファイルシステム上のプロジェクトのルートディレクトリへの絶対パスである必要があります。つまり、パスはオペレーティングシステム（macOS または Linux の場合は /Users/yourname/projects/my-app、Windows の場合は C:\Users\yourname\projects\my-app など）と特定のプロジェクト設定によって異なります。本番環境でこのファイルがチェックインされないように、無視するファイル（.gitignore リストなど）に追加することを検討してください。

サーバーがこのパスを動的に生成または提供するか、開発環境用に正しく構成することが重要です。本番環境でこのファイルをチェックインしないように、無視するファイル（.gitignore リストなど）に追加することを検討してください。

例

プロジェクトの技術スタックに応じて、devtools.json ファイルを提供する方法は多数あります。

Node.js と Express

このスクリプトは最小限の Express サーバーを実行します。/.well-known/appspecific/com.chrome.devtools.json で JSON ファイルを提供します。このファイルには projectRoot. へのパスが含まれています。これは、サーバーが実行されるフォルダを指します。projectRoot 変数を調整して、サーバースクリプトが存在する場所ではなく、プロジェクトの実際のルートディレクトリを正しく指すようにします。

const express = require('express');
const path = require('path');
const { v4: uuidv4 } = require('uuid');

const app = express();
const port = 3000;

if (process.env.NODE_ENV !== 'production') {
  app.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => {
    const projectRoot = path.resolve(__dirname);
    const workspaceUuid = uuidv4();

    res.json({
      workspace: {
        root: projectRoot,
        uuid: workspaceUuid,
      },
    });
  });
}

app.listen(port, () => {
  console.log(`Development server listening at http://localhost:${port}`);
});

`devtools-json-generator` スクリプトを使用する

generate-devtools-json を使用して devtools.json を生成できます。

現在のディレクトリに devtools.json ファイルを生成するには、次のコマンドを実行します。

npx generate-devtools-json

特定のディレクトリにファイルを生成するには、ディレクトリを引数として渡します。

npx generate-devtools-json /path/to/your/project

devtools-json-generator について詳しくは、プロジェクトのホームページをご覧ください。

統合

一部のフロントエンドフレームワークとビルドツールには、このプロセスを簡素化するプラグインや構成が用意されています。

Vite

Vite ベースのプロジェクト（SvelteKit を含む）の場合、vite-plugin-devtools-json はソリューションです。devtools.json ファイルの生成とサービングを自動化します。

使用するには、プラグインをインストールします。

npm install -D vite-plugin-devtools-json

次に、vite.config.js（または vite.config.ts）に追加します。

// vite.config.js
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson({
      // Optional: specify a custom root path if different from Vite's root
      // root: '/path/to/your/project/root',
    }),
  ],
});

Angular

ng serve を使用して Angular プロジェクトをローカルで実行する場合（@angular/cli のバージョンが 19.0.0 以上の場合）、Angular CLI は正しい devtools.json ファイルを自動的に提供するミドルウェアを提供します。

たとえば、新しいアプリケーションを作成して実行するには:

npm install -g @angular/cli
ng new my-first-angular-app
ng serve

https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json に移動すると、生成された JSON ファイルが表示されます。

トラブルシューティング

このセクションのヒントに沿って、ワークスペースの自動接続に関する一般的な問題を解決できます。

ワークスペースからフォルダを削除する

プロジェクトフォルダがすでに自動的に接続されている場合は、DevTools ワークスペースの設定から手動で削除できます。

Chrome DevTools を開きます。
[ソース] タブに移動します。
左側のパネルで、[ワークスペース] サブタブを選択します。
不要なプロジェクトフォルダを右クリックして、[ワークスペースから削除] を選択します。

サーバー上の 404 エラーを無視する

特定のプロジェクトでこの機能を使用しない場合、サーバーログに /.well-known/appspecific/com.chrome.devtools.json リクエストの 404 エラーが表示されても、無視してかまいません。ファイルが配信されない場合、リクエストは無害です。または、エラーをログに記録せずに、この特定のパスに対して 404 ステータスで応答するようにサーバーを構成することもできます。

Chrome DevTools でこの機能を無効にする方法

Chrome デベロッパーツールの自動ワークスペース検出機能を無効にするには、適切な Chrome フラグを設定する必要があります。

Chrome を開き、chrome://flags に移動します。
「DevTools Project Settings」を検索して、[Disabled] に設定します。
「DevTools Automatic Workspace Folders」という関連するフラグが見つかる場合もあります。その場合は、こちらも無効にしてください。
変更を反映するには、Chrome を再起動します。

概要

devtools.json メカニズムを理解して活用することで、Chrome DevTools を使用したローカル開発ワークフローを大幅に強化できます。