この記事を読むと、GitHub Copilotにブラウザを操作してもらい、Webページの画面確認やUIテストを進められるようになります。Web制作で「修正したけれど、別の画面が壊れていないか確認できない」という方でも、この手順通りに進めれば大丈夫です。
GitHub CopilotのVS Code向けブラウザ操作機能は、2026年7月1日に一般提供が始まりました。ページ移動、クリック、入力、ホバー、ドラッグ、ダイアログ操作、ページ内容の読み取り、コンソールエラーの確認、スクリーンショット取得などをエージェントに依頼できます。
結論：Copilotに「操作・確認・修正・再確認」を任せる
従来は、ブラウザを自分で開き、フォームに入力し、画面を目視して、開発者ツール（ブラウザにある検証用の機能）でエラーを探していました。修正後は、同じ操作をもう一度やり直す必要もあります。
ブラウザ操作機能を使うと、次の流れを一つの作業として依頼できます。
- Webアプリや制作中のページを起動する
- ブラウザでページを開いて操作する
- 表示崩れやコンソールエラーを確認する
- 問題があればコードを修正する
- 同じ操作を再実行して結果を確認する
実際に使うと便利なのは、ログイン画面や問い合わせフォームの確認です。入力、ボタンのクリック、画面遷移を一つずつ指示できるため、手作業の確認漏れを減らせます。
事前準備：まずは安全に操作できる環境を作る
最初に感じる壁は、Copilotがどのブラウザタブを見られるのか分かりにくい点です。既存のタブは、明示的に共有するまでエージェントからアクセスできません。
- VS Codeを起動する
- 対象のWeb制作プロジェクトを開く
- ローカル環境（自分のパソコン内で動かす環境）でページを表示する
- Copilot Chatを開き、エージェントを使える状態にする
既に開いているページを使う場合は、ブラウザ側で対象タブを表示し、Share with Agentを選びます。共有操作をしていないタブは見られないため、個人情報を含むページを誤って渡しにくい設計です。
エージェントが新しく開くタブは、分離された一時セッションで動作します。普段使っているブラウザのログイン状態や履歴をそのまま使うものではないため、テスト用のアカウントやダミーデータを用意しておくと安心です。
ブラウザ操作を有効にしてページを確認する手順
1. Copilot Chatでブラウザ操作を依頼する
プロジェクトを開いた状態で、Copilot Chatの入力欄に次のように書きます。
「このWebアプリを起動して、トップページを開いてください。画面の表示崩れ、クリックできないボタン、コンソールエラーを確認してください」
ポイントは、いきなり「テストして」とだけ書かないことです。対象ページ、確認する場所、見つけてほしい問題を分けて指示すると、結果を読みやすくなります。
2. 画面上の操作を順番に指定する
次は、ユーザーが実際に行う操作を具体的に伝えます。たとえば問い合わせフォームなら、次のように依頼します。
- 問い合わせページを開く
- 名前欄にテスト用の名前を入力する
- メール欄にテスト用のメールアドレスを入力する
- 本文欄に短いテスト文を入力する
- 送信ボタンをクリックする
- 入力エラーや完了メッセージを確認する
Copilotはクリックや入力だけでなく、ホバー（マウスポインターを重ねる操作）、ドラッグ、ダイアログ（確認や入力を求める小さな画面）の操作にも対応します。メニューを開いたときだけ表示される項目も確認できます。
3. スクリーンショットとエラーを照合する
見た目の確認を依頼するときは、「スクリーンショットを取得し、見出しの折り返し、ボタンの位置、スマートフォン幅での崩れを確認してください」のように書きます。
同時に「コンソールエラー（ブラウザ内部で発生した問題の記録）も確認してください」と指定しましょう。画面だけでは分からないJavaScriptのエラーや、読み込めていないファイルを発見できることがあります。
4. 修正後に同じテストをもう一度行う
問題が見つかったら、すぐに修正を確定させるのではなく、原因と変更ファイルを確認します。そのうえで「先ほどのテストを同じ手順で再実行し、修正前と変わった点を報告してください」と依頼します。
この再検証が、従来の手作業との大きな違いです。修正した箇所だけでなく、ページ遷移やフォーム送信まで同じ流れで確かめられます。
権限と企業向け設定を確認する
社内サイトや顧客案件で使う場合は、便利さより先にアクセス範囲を確認します。VS Codeの設定画面を開くには、左下の歯車アイコンをクリックし、表示されたメニューから設定を選びます。検索欄にbrowser chat toolsと入力し、ブラウザ操作に関する設定を確認します。
ブラウザ操作の有効・無効は、workbench.browser.enableChatToolsで制御できます。組織で一括管理する場合は、管理者がBrowserChatToolsポリシーを確認します。
さらに、エージェントが接続できるネットワークドメインを制限する設定もあります。公開前の管理画面や社内システムを対象にするなら、必要なドメインだけを許可する考え方が安全です。権限設定は、建物の入館証にたとえると分かりやすく、誰でも全フロアに入れる状態を避けて、必要な部屋だけに入れるようにします。
初心者がつまずきやすいポイントと対処法
| 困ったこと | 原因と対処法 |
|---|---|
| Copilotがページを見ない | 既存タブを共有していない可能性があります。対象タブでShare with Agentを選びます。 |
| 期待した操作をしない | ページ名、クリック場所、入力内容、確認項目を一つずつ指定します。 |
| ログイン後の画面を確認できない | テスト用アカウントを用意し、新しい一時セッションで必要な操作を行います。 |
| 修正結果が判断できない | スクリーンショット、コンソールエラー、再実行結果の3点を報告させます。 |
特に多いのは、依頼が抽象的すぎるケースです。「見た目を直して」ではなく、「スマートフォン幅で見出しが2行になったとき、ボタンが画面外にはみ出していないか確認して」と書くと、結果が具体的になります。
料金・無料プランについて確認しておきたいこと
今回確認できた公式情報では、ブラウザ操作機能単体の料金や無料枠の具体的な条件までは判断できません。利用前に、GitHub Copilotの契約プラン、組織の管理設定、現在の利用条件を公式の契約画面で確認してください。
「ブラウザ操作だけ無料」と決めつけず、利用するアカウントのプランと管理者設定を確認するのが安全です。社内導入では、個人で試す場合と組織で使う場合の条件が異なる可能性もあるため、管理者に確認してから対象ページを共有しましょう。
向いている人・向いていない人
向いている人
- Web制作後の画面確認を効率化したい初心者
- フォームやメニューの動作テストを繰り返す人
- 社内サイトの修正と確認を一人で担当している人
- 画面の見た目とブラウザエラーをまとめて調べたい人
向いていない人
- 本番環境を直接操作させたい人
- 個人情報や機密情報を含むページを準備なしで扱いたい人
- テスト条件を整理せず、完全に自動で判断してほしい人
Copilotは確認作業を助ける道具です。人間の最終確認をなくすものではありません。特に本番公開前は、テスト用データ、共有するタブ、許可するドメインを先に決めてください。
FAQ
既に開いているブラウザのタブは自動で見られますか？
いいえ。既存のタブは、Share with Agentを明示的に選択するまでエージェントからアクセスできません。共有するページを自分で選びましょう。
WordPressの画面確認にも使えますか？
ブラウザで表示できるWordPressの管理画面や公開ページを、対象とする操作手順を整理して確認できます。ただし、管理画面を共有する場合はテスト用アカウントを使い、不要な権限を与えないでください。
Copilotに修正まで任せても大丈夫ですか？
修正案の作成や変更後の再確認には役立ちますが、変更内容は必ず確認してください。特にフォーム送信、権限、決済、個人情報に関わる部分は、人がテスト結果とコードを確認してから公開します。
最初は何をテストすればよいですか？
トップページの表示、グローバルメニュー、問い合わせフォームの3つがおすすめです。操作手順が短く、問題が見つかったときに原因を追いやすいためです。
まとめ：今日から小さなUIテストを始めよう
GitHub Copilotのブラウザ操作機能を使うと、ページを開く、操作する、画面を確認する、エラーを調べる、修正後に再検証するという流れを効率化できます。
最初の一歩は、テスト用のページを一つ選び、次の依頼を入力することです。
「このページを開き、メニュー、フォーム、スマートフォン幅の表示を確認してください。スクリーンショットとコンソールエラーも報告してください」
まずは公開前のトップページなど、失敗しても影響が少ない場所から試してください。共有するタブとアクセス範囲を確認する習慣をつければ、Web制作の確認作業を少しずつ自動化できます。
参考・公式情報
📦 Amazonで関連商品を探す
🛒 楽天市場でVS Code 入門 本を探す
🛒 楽天市場でGitHub Copilot 活用 本を探す
