vscode-dev-workbench

ローカルの VS Code ソースを使って vscode.dev を実行する

vscode-dev リポジトリは vscode.dev サーバーです。ローカルで ?vscode-quality=dev を指定して実行すると、隣接する microsoft/vscode のチェックアウトから VS Code の Web ワークベンチ（または /agents の Agents ウィンドウ）を配信します。これは、Insiders ビルドをリリースせずにワークベンチの Web 限定の変更を検証する最速の方法です。

ディレクトリ構成の前提

vscode-dev と vscode は同じ階層にある必要があります。

<workRoot>/
  vscode/          # microsoft/vscode checkout
  vscode-dev/      # microsoft/vscode-dev checkout

パスが異なる場合は、vscode-dev の server/ でソースルートの解決方法を確認してください。/vscode-sources/* ルートは ../vscode にマッピングされます。

開発サーバーを起動する

重要： npm run dev は vscode ではなく、vscode-dev フォルダーから実行してください。vscode リポジトリには dev スクリプトがないため、npm error Missing script: "dev" というエラーが発生します。先頭の cd を別のコマンドに分割したり取り除いたりするターミナルツールを使うと、以前のターミナルの作業ディレクトリがそのまま使われることがあります。必ず絶対パスを指定して pushd するか、npm run dev の前に pwd で確認してください。

cd /path/to/vscode-dev     # NOT /path/to/vscode
npm run dev                # runs watch + nodemon; serves https://127.0.0.1:3000

エージェント／ターミナルツール経由で操作する場合は、次の方法を推奨します。

pushd /absolute/path/to/vscode-dev >/dev/null && pwd && npm run dev

初回起動時に Cannot find module './indexes' のようなクラッシュが一度発生することがあります。これはウォッチャーが初回ビルドと競合しているためです。out/ のコンパイルが完了すると nodemon が自動的に再起動します。curl -sk -o /dev/null -w "%{http_code}" https://127.0.0.1:3000/ が 200 を返すと、サーバーの準備が完了しています。

URL

• https://127.0.0.1:3000/?vscode-quality=dev — メインのワークベンチ、ローカルの開発ソース
• https://127.0.0.1:3000/agents?vscode-quality=dev — Agents ウィンドウ、ローカルの開発ソース
• https://127.0.0.1:3000/?vscode-version=<commit> — 指定した本番コミット
• クライアントの詳細なログを出力するには、&vscode-log=trace を追加します

統合ブラウザーで操作する

open_browser_page と標準のブラウザーツールを使用してください。

チャット入力欄で Enter を押すと改行される

チャット入力欄は Monaco エディターです。page.keyboard.press('Enter') を押すと改行されます。送信するには、Send ボタン（a[aria-label^="Send"]）をクリックするか、送信のキー割り当てを使用してください。

再ビルド後に強制再読み込みする

サービスワーカーはクライアントアセットを積極的にキャッシュします。通常の再読み込みでは古いモジュールが配信される場合があります。

await page.evaluate(async () => {
  const regs = await navigator.serviceWorker?.getRegistrations() ?? [];
  await Promise.all(regs.map(r => r.unregister()));
  const keys = await caches?.keys() ?? [];
  await Promise.all(keys.map(k => caches.delete(k)));
});
await page.reload({ waitUntil: 'domcontentloaded' });

モバイルをシミュレートする（明示的に要求された場合のみ）

統合ブラウザーパネルでは幅が制限されるため、page.setViewportSize() と CDP の setDeviceMetricsOverride でビューポートを狭めても、パネルの幅より狭くすることはできません。User-Agent のオーバーライドとタッチエミュレーションは問題なく動作します。

const client = await page.context().newCDPSession(page);
await client.send('Emulation.setUserAgentOverride', {
  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
  platform: 'iPhone'
});
await client.send('Emulation.setTouchEmulationEnabled', { enabled: true, maxTouchPoints: 5 });
await client.send('Emulation.setDeviceMetricsOverride', {
  width: 393, height: 852, deviceScaleFactor: 3, mobile: true,
  screenOrientation: { type: 'portraitPrimary', angle: 0 }
});
await page.reload();

実際のモバイルビューポートを使うには、統合ブラウザーではなく、devices['iPhone 14 Pro'] を指定した単独の Playwright スクリプトを実行してください。モバイル対応のオーバーレイが自動操作中にポインターイベントを妨げる場合は、click() に { force: true } を指定してください。

コンソールに表示される既知のノイズメッセージ（無視してください）

• clipboardService.js の Canceled: Canceled — ホバー時の権限確認がキャンセルされたことを示します。
• NotAllowedError: Failed to execute 'write' on 'Clipboard' — Web クリップボードの操作にはユーザーのジェスチャーが必要です。
• [WebTunnelAgentHost] Failed to list tunnels — サインインしていない場合にのみ表示されます。
• The web worker extension host is started in a same-origin iframe! — 開発環境では想定どおりです。
• Unrecognized feature: 'local-network-access' — 開発マニフェストの警告です。
• [LEAKED DISPOSABLE] のスタック — GC ベースのトラッカーです。再読み込みを繰り返しても再現する場合のみ、実際の問題です。

トラブルシューティング

症状	原因	対処方法
初回実行時に Cannot find module './indexes' が表示される	nodemon が TS のコンパイル完了前に起動した	待ってください。自動的に再起動します
チャット送信時に Session not found: <uuid> が表示される	クラウド／トンネル経由のセッションを再度開いた	Agents ウィンドウで新しいセッション（⌘N）を開始してください
ワークスペース選択画面でネイティブダイアログが開き、自動化が停止する	Select Folder… では実際のファイルダイアログが必要	代わりにワークスペース URL スキームを選択するか、自動化ではスキップしてください
vscode/ ソースの編集後に UI が古いままになる	Service Worker のキャッシュ	SW の登録を解除し、キャッシュを消去してください（上記のスニペットを参照）

Agents ウィンドウをローカルのモックエージェントホストに接続してテストする

シナリオで Agents ウィンドウ（/agents ルート）を扱う場合、ほとんどの場合、モックエージェントホストを起動する必要があります。これがないと、Agents ウィンドウはサインイン／トンネル検出画面のままになり、実際の操作ができません。開発サーバーに加えて起動してください。これは 2 つ目のターミナルで実行するもので、開発サーバーの代わりではありません。

vscode-dev は ?mock-agent-host=ws://… URL パラメーターをサポートしています。このパラメーターを指定すると、トンネル検出を迂回し、Agents ウィンドウを WebSocket に直接接続します。microsoft/vscode リポジトリのモックエージェントホストバイナリと組み合わせてください。

cd /path/to/vscode
node out/vs/platform/agentHost/node/agentHostServerMain.js \
  --enable-mock-agent --quiet --without-connection-token --port 8765
# Listens on ws://localhost:8765

前提条件：vscode リポジトリの out/ は、VS Code - Build タスク（または npm run watch）によって生成されている必要があります。out/vs/platform/agentHost/node/agentHostServerMain.js がない場合は、先にそのタスクを起動してください。

--enable-mock-agent は、既存のセッションが 1 つある src/vs/platform/agentHost/test/node/mockAgent.ts の ScriptedMockAgent を登録します。追加のセッションは、セッション URI のカンマ区切りリストを指定した VSCODE_AGENT_HOST_MOCK_SEED_SESSIONS 環境変数を使って作成します（例：VSCODE_AGENT_HOST_MOCK_SEED_SESSIONS=mock://pre-1,mock://pre-2）。スクリプト化されたプロンプトには hello、use-tool、error、permission、write-file、run-safe-command、slow、client-tool、subagent などがあります（一覧については mockAgent.ts を参照してください）。

次に、以下を開きます。

https://127.0.0.1:3000/agents?vscode-quality=dev&mock-agent-host=ws://localhost:8765&vscode-log=trace

以下のログが順番に出力されることを確認してください。

• [MockAgentHost] Using local mock agent host at ws://localhost:8765/
• [WebTunnelAgentHost] Found 1 tunnel(s) with agent host support
• [WebTunnelAgentHost] Connecting to tunnel 'mock-agent-host' (mock)
• [WebTunnelAgentHost] Protocol handshake completed with tunnel:mock
• [RemoteAgentHost] Registered agent mock from tunnel:mock as remote-tunnel__mock-mock

この方法では GitHub 認証と /agents/api/hosts エンドポイントを完全に迂回するため、オフラインでも動作します。vscode-dev 側のフェイクトンネルは、src/vs/platform/agentHost/common/tunnelAgentHost.ts の TUNNEL_MIN_PROTOCOL_VERSION（現在は 5）以上の protocolvN タグを通知する必要があります。そうでない場合、WebTunnelAgentHostService によって除外され、Found 0 tunnel(s) with agent host support と表示されます。