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.

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

Note

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

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

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.

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.

Enable element selection with the
chat.sendElementsToChat.enabled
- Open in VS Code
- Open in VS Code Insiders
setting.
Open the integrated browser and navigate to your web app.
Select the Start button in the browser toolbar to enter selection mode.
Hover over elements and select to add them to your chat prompt.

Configure what information is included:

Setting	Description
chat.sendElementsToChat.attachCSS Open in VS Code Open in VS Code Insiders	Include CSS styles for selected elements
chat.sendElementsToChat.attachImages Open in VS Code Open in VS Code Insiders	Include screenshots of selected elements

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

setting.

Mode	Description
`global`	Data persists and is shared across all browser tabs and workspaces.
`workspace`	Data persists within a workspace but is isolated between workspaces.
`ephemeral`	Data is not shared between tabs or persisted. Similar to incognito mode.

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.

Note

In untrusted workspaces, the browser always uses ephemeral mode regardless of the setting, to protect your data.

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