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.

Open the browser

Run the Browser: Open Integrated Browser command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

You can open multiple browser instances simultaneously, each in its own editor tab.

Enable the workbench.browser.openLocalhostLinks Open in VS Code Open in VS Code Insiders setting to automatically open localhost URLs in the integrated browser instead of your default system browser.

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

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.

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": "launch",
      "name": "Launch in integrated browser",
      "url": "http://localhost:8000"
    }
  ]
}

Press F5 to open the URL in the integrated browser with the debugger attached. Standard debugging features like breakpoints, stepping, and variable inspection work as expected. The browser tab closes automatically when you stop the debug session.

Attach to an existing tab

To attach the debugger to an integrated browser tab that is already open, use an attach configuration:

{
  "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:

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

If one tab matches the filter, VS Code attaches to it directly. If multiple tabs match, the picker shows only the filtered results.

For a full reference of launch configuration attributes, see Browser debugging in VS Code.

Standalone window

Move the browser to its own floating window by right-clicking the editor tab and selecting Move into New Window. Use Set Always on Top from the floating window's title bar to keep it visible.

Add elements to AI chat

Select elements from a web page to add them as context to your chat prompt. This is useful for getting help with specific HTML elements, CSS styles, or debugging UI issues.

1. Open the integrated browser and navigate to your web app.
2. Select the Add Element to Chat button in the browser toolbar to enter selection mode.
3. Hover over elements and select to add them to your chat prompt.

Configure what information is included:

Learn more about adding context to chat.

Permissions

The browser automatically denies most permission requests (camera, microphone, geolocation) for security. Notifications, clipboard access, and file selection are allowed.

Session storage

Control how the integrated browser stores session data such as cookies, logins, localStorage, and cache with the workbench.browser.dataStorage Open in VS Code Open in VS Code Insiders setting.

To clear stored data, select the menu in the browser toolbar and choose Clear Storage (Global) or Clear Storage (Workspace) depending on your current storage mode. Reload the browser tab after clearing storage to apply the changes.

Use as a default browser

VS Code also has a built-in Simple Browser to preview web pages that has limited functionality compared to the integrated browser. If you want to use the integrated browser instead of the Simple Browser, enable the simpleBrowser.useIntegratedBrowser Open in VS Code Open in VS Code Insiders setting.

The Live Preview extension can use the integrated browser for previewing web pages. Enable the livePreview.useIntegratedBrowser Open in VS Code Open in VS Code Insiders setting to use it as the default preview browser.

Browser tools for agents

Agents can read and interact with pages in the integrated browser by using built-in browser tools. When enabled, agents can open browser pages, navigate to URLs, read page content and console errors, take screenshots, click elements, type text, hover over elements, drag elements, handle dialogs, and run Playwright code, all without requiring an external MCP server.

Browser tools are different from adding elements to AI chat. Element selection lets you manually pick page elements as context for a chat prompt. Browser tools let agents autonomously interact with web pages to complete tasks.

To enable browser tools, set the workbench.browser.enableChatTools Open in VS Code Open in VS Code Insiders setting to true. The tools are then available to the agent automatically.

Agents can only access browser pages that are either opened by the agent with the openBrowserPage tool, or explicitly shared by you with the Share with Agent button. Pages that are not shared are never visible to the agent.

Share a browser page with agents

To let an agent read and interact with a page you opened, select the Share with Agent button in the browser toolbar. A confirmation dialog asks you to approve sharing before the agent gets access.

A visual indicator on the browser tab shows that a page is currently being shared. To stop sharing, select the Share with Agent button again. This immediately revokes the agent's access to that page.

You can now ask the agent to read content from the page or interact with it. For example, you could ask "What is the title of the page?" or "Click the login button and tell me if it works."

Shared pages use your existing browser session, including cookies and login state. Pages opened by the agent use isolated ephemeral sessions, so they don't share cookies or storage with your other browser tabs.

Related

• Browser debugging in VS Code
• Test web apps with browser agent tools
• Add context to AI chat
• Port forwarding