はじめに

2026年7月1日、GitHub Copilot の Browser Tools（VS Code 統合ブラウザでの操作機能）が一般提供（GA）になり、デフォルトで有効化された¹。これまで Copilot Chat はコードを書くところまでは得意でも、「実際に画面を開いて動かして確認する」のは人間の役目だった。Browser Tools はこの最後の一手を埋める機能で、エージェント自身がページを開き、クリックし、入力し、コンソールログやスクリーンショットを読み取って結果をチャットに返せる。

筆者は実際に手を動かせる部分（Playwright での再現・設定ファイルの検証）を通してこの機能の中身を確認した。その過程で、公式アナウンスの「デフォルトでオン」という説明と食い違う organization 設定がらみの落とし穴（VS Code リポジトリに Issue が立っている既知の問題）に行き着いたので、そこまで含めて共有する。

この記事で学べること

Browser Tools のセットアップ手順と有効化の確認方法
「壊れたUI」を実際に検証させ、バグを検出→修正確認するまでの一連の流れ（動くコード付き）
organization ポリシーが絡むと起きる、設定画面が意図せずグレーアウトする既知の不具合

対象読者

VS Code + GitHub Copilot を使っている、または Enterprise/Business プランで組織管理下にいる開発者
AIエージェントに「動作確認」まで任せられるか見極めたい人

前提環境

VS Code（最新版・Browser Tools は GA 版のみ対応）
GitHub Copilot サブスクリプション
検証用: Node.js 22.x + Playwright（Browser Tools の内部実装と同じ Chromium ベースの操作を手元で再現するために使用）

TL;DR

Browser Tools は GA 化により デフォルトで有効。設定 workbench.browser.enableChatTools が true になっているかはチャットのツール一覧から確認できる²。
意図的にバグを仕込んだ電卓 HTML を用意し、実際に4演算をブラウザ操作で検証したところ、10 / 2 が 12 を返す壊れた挙動を実測できた。修正後は 5 に戻ることも確認済み。
Copilot の MCP サーバーを organization レベルで無効化していると、無関係なはずの Browser Tools 設定まで「organization によって管理されています」と表示されグレーアウトする既知の不具合が VS Code リポジトリに報告されている（2026年7月時点で "Closed as not planned"）³。

背景・課題

Browser Tools が使えるツールは以下の10個¹²:

ツール	役割
`openBrowserPage` / `navigatePage`	ページを開く・遷移する
`readPage` / `screenshotPage`	ページ内容・見た目を取得する
`clickElement` / `hoverElement` / `dragElement` / `typeInPage` / `handleDialog`	クリック・ホバー・ドラッグ・入力・ダイアログ操作
`runPlaywrightCode`	上記で足りない複雑な操作を Playwright コードとして直接実行する

エージェントが開いたタブは「他のタブとクッキー・ストレージを共有しないプライベートセッション」で動作し、ユーザーが明示的に「Share with Agent」を選ぶまで既存のログイン状態のタブにはアクセスできない¹。この設計により、「AIに勝手にログイン中のページを触られる」不安を抑えつつ、フロントエンドの変更を自己検証させられるようになった。

やってみた: 壊れた電卓を検証させる

VS Code の Copilot Chat をこの場で操作することはできないため、Browser Tools が実際に使っている操作の中身（runPlaywrightCode の実体である Playwright）を使って、エージェントが辿るであろう手順をそのまま再現した。読者は同じ HTML とスクリプトをそのまま git clone 不要でコピペして手元で追試できる。

1. 検証対象: 意図的にバグを仕込んだ電卓

<!-- calculator.html -->
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>簡易電卓</title></head>
<body>
  <input id="a" type="number" value="10">
  <select id="op">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input id="b" type="number" value="2">
  <button id="calc">計算</button>
  <p id="result"></p>
<script>
function calculate(a, b, op) {
  if (op === '+') return a + b;
  if (op === '-') return a - b;
  if (op === '*') return a * b;
  if (op === '/') return a + b; // バグ: 本来は a / b
  throw new Error('unknown op: ' + op);
}
document.getElementById('calc').addEventListener('click', () => {
  const a = Number(document.getElementById('a').value);
  const b = Number(document.getElementById('b').value);
  const op = document.getElementById('op').value;
  const r = calculate(a, b, op);
  document.getElementById('result').textContent = `結果: ${r}`;
  console.log(`calc(${a}, ${b}, "${op}") = ${r}`);
});
</script>
</body>
</html>

割り算だけ実装が a + b になっている（コピペミスを想定した意図的なバグ）。

2. Browser Tools 相当の操作で4演算を検証

// verify.js
const { chromium } = require('playwright');
const path = require('path');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  const consoleLogs = [];
  page.on('console', msg => consoleLogs.push(`[${msg.type()}] ${msg.text()}`));

  await page.goto('file://' + path.resolve('calculator.html'));

  const results = {};
  for (const op of ['+', '-', '*', '/']) {
    await page.fill('#a', '10');
    await page.fill('#b', '2');
    await page.selectOption('#op', op);
    await page.click('#calc');
    results[op] = await page.textContent('#result');
  }

  console.log(JSON.stringify(results, null, 2));
  console.log(consoleLogs.join('\n'));
  await browser.close();
})();

openBrowserPage→navigatePage→typeInPage→clickElement→readPage という Browser Tools の操作列を、同じ Chromium エンジン上でそのまま再現している（file:// パスの組み立ては macOS/Linux 向け。Windows で追試する場合は require('node:url').pathToFileURL(...) を使うとパス区切り文字の問題を避けられる）。実行結果:

{
  "+": "結果: 12",
  "-": "結果: 8",
  "*": "結果: 20",
  "/": "結果: 12"
}

10 / 2 の結果が 12（+ と同じ）になっており、割り算の実装ミスが数値としてそのまま出力に表れた。エージェントに「四則演算を検証して」と依頼した場合、この readPage の戻り値だけで異常に気づける水準の情報量だ。

3. 修正して再検証

return a + b; を return a / b; に直して同じスクリプトを再実行すると:

{
  "+": "結果: 12",
  "-": "結果: 8",
  "*": "結果: 20",
  "/": "結果: 5"
}

/ が正しく 5 を返すようになった。VS Code 上の実際のフローでは、この「検証→バグ発見→修正コード提案→再検証」のループをチャット越しにエージェントが一気通貫で回せる、というのが Browser Tools の主張であり、少なくとも検証部分（壊れた挙動を数値として拾える）は今回の再現で裏付けが取れた。

セットアップ手順（VS Code 側）

VS Code を最新版に更新する（Browser Tools は GA 版のみ対応）。
チャットビューを開き（⌃⌘I / Ctrl+Alt+I）、エージェントモードを選択する。
ツールボタンをクリックし、Built-in > Browser 配下のツールをすべて有効化する²。
設定 workbench.browser.enableChatTools が true になっているか settings.json で確認する:
```
{
  "workbench.browser.enableChatTools": true
}
```
GA 化に伴いデフォルトで true のはずだが、次項の理由でグレーアウトしている場合がある。

ハマりポイント: organization の MCP 無効化設定が巻き添えにする

workbench.browser.enableChatTools は organization レベルで管理できる設定だが、VS Code リポジトリには「Copilot の MCP サーバーを organization 側で無効化すると、MCP とは無関係のはずのこの設定まで『organization によって管理されています』と表示されて変更できなくなる」という Issue が報告されている³。報告者は「ブラウザの統合チャット機能は MCP サーバーに依存しないはずなのに設定が連動しているように見える」と指摘しており、2026年7月時点でのステータスは "Closed as not planned" となっている。

組織アカウントで Browser Tools が急に使えなくなった/設定が変更できない場合、まず疑うべきは「MCP サーバーの organization レベル無効化」。個人の設定ミスではなく、無関係な管理者ポリシーが巻き添えにしているケースがある。

Enterprise/Business プランで Copilot を使っていて Browser Tools が期待通り動かないときは、まず自分の settings.json を疑う前に、組織の Copilot 管理画面で MCP サーバーポリシーがどう設定されているかを確認したほうが早い。

まとめ

Browser Tools は GA 化でデフォルト有効。壊れた挙動を readPage の戻り値やコンソールログとして拾える精度は、今回の電卓検証（10/2=12 の実測）で確認できた。
ただし organization 管理下では、MCP 無効化ポリシーが無関係な設定まで巻き添えでロックする既知の不具合がある。「設定できない」＝自分のミスとは限らない。
次に試したいこと: runPlaywrightCode を使った、複数ページをまたぐ E2E 相当のシナリオ検証。

著者視点の発見ポイント

筆者が実際に検証して気づいたのは、Browser Tools の価値は「エージェントがブラウザを触れる」こと自体より、検証結果を数値・テキストとして正確に拾える点 にある。スクリーンショットだけでは「なんとなく動いてそう」で終わりがちだが、readPage でDOM上のテキストを取得すれば 結果: 12 という具体的な誤りとして機械的に検出できる。もう一つの発見は、GA 発表の「デフォルトで有効」という単純な説明の裏に、organization 管理下では別のポリシー（MCP無効化）が巻き添えで機能を止めるケースがあるという点で、公式アナウンスだけを鵜呑みにせず実際の設定画面と Issue トラッカーまで確認する価値があった。

参考リンク

Browser tools for GitHub Copilot in VS Code are generally available（GitHub Changelog） — GA化・プライバシー設計の一次情報
Build and test web apps with browser agent tools（VS Code公式ドキュメント） — セットアップ手順・ツール一覧
workbench.browser.enableChatTools setting showing as managed by organization（microsoft/vscode Issue #298949） — organization設定の落とし穴

Browser tools for GitHub Copilot in VS Code are generally available（GitHub Changelog・2026-07-01） ↩ ↩² ↩³
Build and test web apps with browser agent tools（VS Code公式ドキュメント） ↩ ↩² ↩³
workbench.browser.enableChatTools setting showing as managed by organization（microsoft/vscode Issue #298949） ↩ ↩²