← 返回首页
Integrated browser
Visual Studio Code
Download

Use the Agents window to build in an agent-first way.

Documentation

Topics Overview Overview Linux macOS Windows VS Code for the Web Raspberry Pi Network Additional Components Uninstall VS Code Tutorial Copilot Quickstart User Interface Personalize VS Code Install Extensions Tips and Tricks Intro Videos Overview Setup Quickstart Overview Language Models Context Tools Agents Customization Trust & Safety Overview Agents Tutorial Agents Window Planning Memory Tools Subagents Local Agents Copilot CLI Cloud Agents Third-Party Agents Overview Chat Sessions Add Context Inline Chat Review Edits Checkpoints Artifacts Panel Debug Chat Interactions Prompt Examples Overview Instructions Prompt Files Custom Agents Agent Skills Language Models MCP Hooks Plugins Context Engineering Customize AI Test-Driven Development Edit Notebooks with AI Test with AI Test Web Apps with Browser Tools Debug with AI MCP Dev Guide OpenTelemetry Monitoring Inline Suggestions Smart Actions Best Practices Security Troubleshooting FAQ Cheat Sheet Settings Reference MCP Configuration Workspace Context Display Language Layout Keyboard Shortcuts Settings Settings Sync Extension Marketplace Extension Runtime Security Themes Profiles Overview Voice Interactions Command Line Interface Telemetry Basic Editing IntelliSense Code Navigation Refactoring Snippets Overview Multi-Root Workspaces Workspace Trust Tasks Debugging Debug Configuration Testing Port Forwarding Integrated Browser Overview Quickstart Staging & Committing Branches & Worktrees Repositories & Remotes Merge Conflicts Collaborate on GitHub Troubleshooting FAQ Getting Started Tutorial Terminal Basics Terminal Profiles Shell Integration Appearance Advanced Overview Enterprise Policies AI Settings Extensions Telemetry Updates Overview JavaScript JSON HTML Emmet CSS, SCSS and Less TypeScript Markdown PowerShell C++ Java PHP Python Julia R Ruby Rust Go T-SQL C# .NET Swift Working with JavaScript Node.js Tutorial Node.js Debugging Deploy Node.js Apps Browser Debugging Angular Tutorial React Tutorial Vue Tutorial Debugging Recipes Performance Profiling Extensions Tutorial Transpiling Editing Refactoring Debugging Quick Start Tutorial Run Python Code Editing Linting Formatting Debugging Environments Testing Python Interactive Django Tutorial FastAPI Tutorial Flask Tutorial Create Containers Deploy Python Apps Python in the Web Settings Reference Getting Started Navigate and Edit Refactoring Formatting and Linting Project Management Build Tools Run and Debug Testing Spring Boot Modernizing Java Apps Application Servers Deploy Java Apps GUI Applications Extensions FAQ Intro Videos GCC on Linux GCC on Windows GCC on Windows Subsystem for Linux Clang on macOS Microsoft C++ on Windows Build with CMake CMake Tools on Linux CMake Quick Start C++ Dev Tools for Copilot Editing and Navigating Debugging Configure Debugging Refactoring Settings Reference Configure IntelliSense Configure IntelliSense for Cross-Compiling FAQ Intro Videos Get Started Navigate and Edit IntelliCode Refactoring Formatting and Linting Project Management Build Tools Package Management Run and Debug Testing FAQ Overview Node.js Python ASP.NET Core Debug Docker Compose Registries Deploy to Azure Choose a Dev Environment Customize Develop with Kubernetes Tips and Tricks Overview Jupyter Notebooks Data Science Tutorial Python Interactive Data Wrangler Quick Start Data Wrangler PyTorch Support Azure Machine Learning Manage Jupyter Kernels Jupyter Notebooks on the Web Data Science in Microsoft Fabric Foundry Toolkit Overview Foundry Toolkit Copilot Tools Create Agents Models Playground Agent Builder Agent Inspector Evaluation Tool Catalog Fine-Tuning (Automated Setup) Fine-Tuning (Project Template) Model Conversion Tracing Profiling (Windows ML) FAQ File Structure Manual Model Conversion Manual Model Conversion on GPU Setup Environment Without Foundry Toolkit Template Project Migrating from Visualizer to Agent Inspector Overview Getting Started Resources View Deployment VS Code for the Web - Azure Containers Azure Kubernetes Service Kubernetes MongoDB Remote Debugging for Node.js Overview SSH Dev Containers Windows Subsystem for Linux GitHub Codespaces VS Code Server Tunnels SSH Tutorial WSL Tutorial Tips and Tricks FAQ Overview Tutorial Attach to Container Create Dev Container Advanced Containers devcontainer.json Dev Container CLI Tips and Tricks FAQ Default Keyboard Shortcuts Default Settings Substitution Variables Tasks Schema
Copy as Markdown

On this page there are 12 sections

Integrated browser

The integrated browser enables you to open and interact with web pages directly inside VS Code. Use it to preview web applications, test authentication flows, and select page elements to add as context to your AI chat prompts.

Note

The integrated browser is currently an experimental feature and may change in future releases.

Open the browser

There are several ways to open the integrated browser:

  • Run the Browser: Open Integrated Browser command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).
  • Select View > Browser from the menu bar, or use the keyboard shortcut.
  • Select the globe button in the VS Code title bar. Use the workbench.browser.showInTitleBar Open in VS Code Open in VS Code Insiders setting to control whether the globe button appears.
  • Select a localhost link anywhere in VS Code, like the terminal or chat. Enable this behavior with the workbench.browser.openLocalhostLinks Open in VS Code Open in VS Code Insiders setting.
  • Ask an agent to open or interact with a web page. See Browser tools for agents.
  • Start a debug session with the editor-browser debug type. See Debugging.

You can open multiple browser instances simultaneously, each in its own editor tab. When a browser tab is already open, the View > Browser menu item and the title bar globe button open the tab management Quick Pick instead of creating a new browser tab.

Navigation

The browser supports http://, https://, and file:// URLs. Use the address bar to navigate to any URL, or use in-page links to navigate within a site.

  • Normal navigation and anchor links work as expected
  • Ctrl+click (Cmd+click on macOS) opens links in a new browser tab
  • Popups are blocked, but new tabs are allowed

Tab management

Use the Browser: Quick Open Browser Tab... command (⇧⌘A (Windows, Linux Ctrl+Shift+A)) to quickly switch between open browser tabs. The Quick Pick lists all open tabs grouped by editor group, and you can type to filter by tab name or URL.

From the Quick Pick, you can:

  • Select a tab to switch to it
  • Select New Integrated Browser Tab to open a new browser tab
  • Select the close button on a tab to close it
  • Select the Close All button to close all browser tabs

You can also close browser tabs with the following commands:

Command Description
Browser: Close All Browser Tabs Close all browser tabs across all editor groups.
Browser: Close All Browser Tabs in Group Close all browser tabs in the current editor group.

The Close All Browser Tabs option is also available in the right-click context menu on browser editor tabs.

Developer Tools

Toggle the browser's Developer Tools from the browser toolbar to inspect elements, view console output, and debug page issues.

Debugging

You can debug web applications directly in the integrated browser by using the editor-browser debug type in your launch.json configuration. Launch a new browser tab with the debugger attached, or attach to a tab that is already open. This works anywhere Visual Studio Code Desktop is supported, even without an external browser installed.

Note

The editor-browser debug type is not yet available in the Run and Debug auto-detection flows. You need to manually add it to your launch.json file.

Launch a debug session

To launch a new integrated browser tab and start debugging, add a launch configuration to your .vscode/launch.json file:

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

When you start this configuration:

  • If no integrated browser tabs are open, VS Code creates a new tab and attaches to it.
  • If one tab is open, VS Code attaches to it automatically.
  • If multiple tabs are open, a picker lets you choose which tab to attach to.

The browser tab stays open when you stop the debug session.

To automatically attach to a tab with a specific URL, add a urlFilter property to the configuration: