0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kai_kou(甲斐 甲)

GitHub CopilotにUI検証を任せたら、組織設定の落とし穴にハマった

0
Posted at

はじめに

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

背景・課題

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

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

エージェントが開いたタブは「他のタブとクッキー・ストレージを共有しないプライベートセッション」で動作し、ユーザーが明示的に「Share with Agent」を選ぶまで既存のログイン状態のタブにはアクセスできない1。この設計により、「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 側）

  1. VS Code を最新版に更新する（Browser Tools は GA 版のみ対応）。
  2. チャットビューを開き（⌃⌘I / Ctrl+Alt+I）、エージェントモードを選択する。
  3. ツールボタンをクリックし、Built-in > Browser 配下のツールをすべて有効化する2。
  4. 設定 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 が報告されている3。報告者は「ブラウザの統合チャット機能は 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 トラッカーまで確認する価値があった。

参考リンク

  1. Browser tools for GitHub Copilot in VS Code are generally available（GitHub Changelog・2026-07-01） ↩ ↩2 ↩3

  2. Build and test web apps with browser agent tools（VS Code公式ドキュメント） ↩ ↩2 ↩3

  3. workbench.browser.enableChatTools setting showing as managed by organization（microsoft/vscode Issue #298949） ↩ ↩2

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?