統合ブラウザー

統合ブラウザーを使用すると、VS Code 内で直接 Web ページを開いて操作できます。Web アプリケーションのプレビュー、認証フローのテスト、ページ要素を選択して AI チャットのプロンプトにコンテキストとして追加するなどの操作に使用します。

Screenshot of the integrated browser in VS Code displaying a web page.

注意

統合ブラウザーは現在試験的な機能であり、今後のリリースで変更される可能性があります。

ブラウザーを開く

統合ブラウザーを開くには、いくつかの方法があります

コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から ブラウザー: 統合ブラウザーを開く (Browser: Open Integrated Browser) コマンドを実行します。
メニューバーから表示 > ブラウザー を選択するか、キーボードショートカット ⌥⌘/ (Windows、Linux Ctrl+Alt+/) を使用します。
VS Code のタイトルバーにある地球儀のボタンを選択します。地球儀のボタンを表示するかどうかを制御するには、設定 workbench.browser.showInTitleBar VS Code で開く VS Code Insiders で開くを使用します。
ターミナルやチャットなど、VS Code 内の任意の場所にある localhost のリンクを選択します。この動作を有効にするには、設定 workbench.browser.openLocalhostLinks VS Code で開く VS Code Insiders で開くを使用します。
Web ページを開くか、操作するようにエージェントに依頼します。詳細はエージェント向けブラウザーツールを参照してください。
editor-browser デバッグタイプを使用してデバッグセッションを開始します。詳細はデバッグを参照してください。

複数のブラウザーインスタンスを、それぞれ独自のエディタータブで同時に開くことができます。ブラウザータブが既に開いている場合、表示 > ブラウザー メニュー項目とタイトルバーの地球儀ボタンは、新しいブラウザータブを作成する代わりに、タブ管理のクイックピックを開きます。

タブの管理

ブラウザー: ブラウザータブをすばやく開く... (Browser: Quick Open Browser Tab...) コマンド (⇧⌘A (Windows, Linux Ctrl+Shift+A)) を使用して、開いているブラウザータブをすばやく切り替えます。クイックピックには、エディターグループごとにグループ化された、開いているすべてのタブがリストされ、入力してタブ名や URL でフィルター処理できます。

クイックピックからは、以下の操作を行えます

タブを選択して切り替える
新規統合ブラウザータブ (New Integrated Browser Tab) を選択して、新しいブラウザータブを開く
タブの閉じるボタンを選択して閉じる
すべて閉じる (Close All) ボタンを選択して、すべてのブラウザータブを閉じる

以下のコマンドを使用して、ブラウザータブを閉じることもできます

コマンド	説明
ブラウザー: すべてのブラウザータブを閉じる	すべてのエディターグループにわたるすべてのブラウザータブを閉じます。
ブラウザー: グループ内のすべてのブラウザータブを閉じる	現在のエディターグループ内のすべてのブラウザータブを閉じます。

すべてのブラウザータブを閉じる オプションは、ブラウザーエディタータブを右クリックしたときに表示されるコンテキストメニューからも利用できます。

デベロッパーツール

ブラウザーのツールバーからブラウザーのデベロッパーツールを切り替えて、要素の検証、コンソール出力の表示、ページの問題のデバッグを行います。

デバッグ

launch.json 構成で editor-browser デバッグタイプを使用することで、統合ブラウザー内で直接 Web アプリケーションをデバッグできます。デバッガーがアタッチされた状態で新しいブラウザータブを起動するか、既に開いているタブにアタッチします。これは、外部ブラウザーがインストールされていなくても、Visual Studio Code Desktop がサポートされている場所ならどこでも動作します。

注意

editor-browser デバッグタイプは、まだ 実行とデバッグ の自動検出フローでは利用できません。launch.json ファイルに手動で追加する必要があります。

デバッグセッションの起動

新しい統合ブラウザータブを起動してデバッグを開始するには、.vscode/launch.json ファイルに起動構成を追加します

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "editor-browser",
      "request": "launch",
      "name": "Launch in integrated browser",
      "url": "https://:8000"
    }
  ]
}

プレス F5 を押して、デバッガーがアタッチされた状態で統合ブラウザーで URL を開きます。ブレークポイント、ステップ実行、変数検査などの標準的なデバッグ機能が期待通りに動作します。デバッグセッションを停止すると、ブラウザータブは自動的に閉じます。

既存のタブへのアタッチ

既に開いている統合ブラウザータブにデバッガーをアタッチするには、アタッチ構成を使用します

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "editor-browser",
      "request": "attach",
      "name": "Attach to integrated browser"
    }
  ]
}

この構成を開始すると

統合ブラウザータブが1つも開いていない場合、VS Code は新しいタブを作成してそれにアタッチします。
タブが 1 つだけ開いている場合、VS Code は自動的にそのタブにアタッチします。
複数のタブが開いている場合は、選択ピッカーが表示され、どのアタッチ先タブを選択するか指定できます。

デバッグセッションを停止しても、ブラウザータブは開いたままになります。

特定の URL を持つタブに自動的にアタッチするには、構成に urlFilter プロパティを追加します

{
  "type": "editor-browser",
  "request": "attach",
  "name": "Attach to localhost",
  "urlFilter": "https://:3000/*"
}

フィルターに一致するタブが 1 つだけの場合、VS Code は直接そのタブにアタッチします。複数のタブが一致する場合、ピッカーにはフィルター処理された結果のみが表示されます。

起動構成属性の完全なリファレンスについては、VS Code でのブラウザーデバッグを参照してください。

スタンドアロンウィンドウ

エディタータブを右クリックして 新しいウィンドウに移動 (Move into New Window) を選択することで、ブラウザーを専用のフローティングウィンドウに移動できます。フローティングウィンドウのタイトルバーから 常に手前に表示 (Set Always on Top) を使用して、常に表示された状態に維持します。

AI チャットにコンテキストを追加する

ブラウザーのツールバーには、現在のページからさまざまな種類のコンテキストをキャプチャしてチャットプロンプトに添付できる、アクション付きの チャットに追加 (Add to Chat) 分割ボタンがあります。これらのアクションはコマンドパレットからも利用できます。

要素の追加

Web ページから要素を選択して、チャットプロンプトにコンテキストとして追加します。これは、特定の HTML 要素、CSS スタイルに関するヘルプを得たり、UI の問題をデバッグしたりするのに便利です。

統合ブラウザーを開き、Web アプリに移動します。
ブラウザーのツールバーにある 要素をチャットに追加 (Add Element to Chat) ボタンを選択して、選択モードに入ります。
要素の上にカーソルを置き、選択してチャットプロンプトに追加します。

含まれる情報の構成

設定	説明
chat.sendElementsToChat.attachCSS Open in VS Code Open in VS Code Insiders	選択した要素の CSS スタイルを含める
chat.sendElementsToChat.attachImages Open in VS Code Open in VS Code Insiders	選択した要素のスクリーンショットを含める

スクリーンショットの追加

現在のブラウザービューポートのスクリーンショットをキャプチャし、画像としてチャットプロンプトに添付します。これを使用して、レイアウトの問題について質問したり、デザインに関するフィードバックを得たり、Web アプリの現在の状態を示したりします。

ブラウザーのツールバーから スクリーンショットをチャットに追加 (Add Screenshot to Chat) を選択するか、ブラウザー: スクリーンショットをチャットに追加 (Browser: Add Screenshot to Chat) コマンドを実行します。スクリーンショットはチャットパネルが開く前にキャプチャされるため、表示されている通りのページが反映されます。

コンソールログの追加

現在のページからコンソール出力をキャプチャし、チャットプロンプトにコンテキストとして添付します。これは、Web アプリのランタイムエラーや予期しない動作をデバッグするのに便利です。

ブラウザーのツールバーから コンソールログをチャットに追加 (Add Console Logs to Chat) を選択するか、ブラウザー: コンソールログをチャットに追加 (Browser: Add Console Logs to Chat) コマンドを実行します。

詳細は、チャットへのコンテキストの追加を参照してください。

権限

セキュリティのため、ブラウザーはほとんどの権限要求 (カメラ、マイク、位置情報) を自動的に拒否します。通知、クリップボードへのアクセス、およびファイルの選択は許可されます。

セッションストレージ

統合ブラウザーが Cookie、ログイン情報、localStorage、キャッシュなどのセッションデータを保存する方法を、設定 workbench.browser.dataStorage VS Code で開く VS Code Insiders で開くで制御します。

モード	説明
`global`	データは保持され、すべてのブラウザータブとワークスペース間で共有されます。
`workspace`	データはワークスペース内に保持されますが、ワークスペース間で隔離されます。
`ephemeral`	データはタブ間で共有されず、保持もされません。シークレットモードに似ています。

保存されたデータを消去するには、ブラウザーのツールバーにあるメニューを選択し、現在のストレージモードに応じて ストレージの消去 (グローバル) (Clear Storage (Global)) または ストレージの消去 (ワークスペース) (Clear Storage (Workspace)) を選択します。消去後にブラウザータブをリロードして変更を適用します。

注意

信頼されていないワークスペースでは、データを保護するために、設定に関係なくブラウザーは常に ephemeral モードを使用します。

Live Preview 拡張機能での使用

Live Preview 拡張機能は、Web ページのプレビューに統合ブラウザーを使用できます。デフォルトのプレビューブラウザーとして使用するには、設定 livePreview.useIntegratedBrowser VS Code で開く VS Code Insiders で開くを有効にします。

エージェント向けブラウザーツール

注意

エージェント向けのブラウザーツールは現在試験的な機能です。

エージェントは、組み込みのブラウザーツールを使用して、統合ブラウザー内のページを読み取って操作できます。有効にすると、エージェントは、外部の MCP サーバーを必要とせずに、ブラウザーページを開く、URL に移動する、ページコンテンツやコンソールエラーを読み取る、スクリーンショットを撮る、要素をクリックする、テキストを入力する、要素の上にホバーする、要素をドラッグする、ダイアログを処理する、Playwright コードを実行するなどの操作をすべて実行できます。

ブラウザーツールは、AI チャットへのコンテキストの追加とは異なります。「チャットに追加」アクションを使用すると、手動でページ要素を選択したり、スクリーンショットをキャプチャしたり、コンソールログをチャットプロンプトのコンテキストとして添付したりできます。一方、ブラウザーツールを使用すると、エージェントが自律的に Web ページを操作してタスクを完了できます。

ブラウザーツールを有効にするには、設定 workbench.browser.enableChatTools VS Code で開く VS Code Insiders で開くこの設定は組織レベルで管理されています。変更するには管理者にお問い合わせください。を true に設定します。これで、エージェントはツールを自動的に利用できるようになります。

ブラウザーページをエージェントと共有する

自分が開いたページをエージェントに読み取らせたり操作させたりするには、ブラウザーのツールバーにある エージェントと共有 (Share with Agent) ボタンを選択します。エージェントがアクセスする前に、共有を承認するか確認するダイアログが表示されます。

ブラウザータブ上の視覚的インジケーターは、ページが現在共有されていることを示します。共有を停止するには、エージェントと共有 (Share with Agent) ボタンをもう一度選択します。これにより、エージェントの該当ページへのアクセス権が即座に無効になります。

これで、エージェントにページからコンテンツを読み取るか、ページを操作するように依頼できます。たとえば、「ページのタイトルは何ですか？」や「ログインボタンをクリックして、機能するかどうか教えてください」のように質問できます。

共有されたページでは、Cookie やログイン状態を含む、既存のブラウザーセッションが使用されます。エージェントによって開かれたページは分離された一時的な (ephemeral) セッションを使用するため、他のブラウザータブと Cookie やストレージを共有しません。

共有されていないブラウザータブが開いている場合、エージェントは共有されていないタブが存在することを検出し、タブを共有するよう促すことができます。たとえば、「このブラウザーページには何が表示されていますか？」と質問したときにどのタブも共有されていない場合、エージェントはタブを共有するかどうかを選択できる質問カルーセルを表示します。

エージェントが新しいページを開こうとしたときに、同じドメインのタブが既に開いている場合は、新しいページを開く代わりに、既存のタブを共有するよう促されます。一致するドメインとポートを持つタブのみがリストされます。いいえ (No) を選択した場合、エージェントは新しいタブを開き、その新しいタブのみが共有されます。

オートパイロットモードでは、プライバシーを保護するため、共有要求は自動的に拒否されます。

統合ブラウザー

ブラウザーを開く

ナビゲーション

タブの管理

デベロッパーツール

デバッグ

デバッグセッションの起動

既存のタブへのアタッチ

スタンドアロンウィンドウ

AI チャットにコンテキストを追加する

要素の追加

スクリーンショットの追加

コンソールログの追加

権限

セッションストレージ

Live Preview 拡張機能での使用

エージェント向けブラウザーツール

ブラウザーページをエージェントと共有する

関連

統合ブラウザー

ブラウザーを開く

ナビゲーション

タブの管理

デベロッパー ツール

デバッグ

デバッグ セッションの起動

既存のタブへのアタッチ

スタンドアロン ウィンドウ

AI チャットにコンテキストを追加する

要素の追加

スクリーンショットの追加

コンソール ログの追加

権限

セッション ストレージ

Live Preview 拡張機能での使用

エージェント向けブラウザー ツール

ブラウザー ページをエージェントと共有する

エージェント起点の共有要求

関連

デベロッパーツール

デバッグセッションの起動

スタンドアロンウィンドウ

コンソールログの追加

セッションストレージ

エージェント向けブラウザーツール

ブラウザーページをエージェントと共有する