On this page there are 14 sectionsOn this page

• Open the browser
• Navigation
• Browser history
• Tab management
• Developer Tools
• Debugging
• Standalone window
• Add context to AI chat
• Permissions
• Session storage
• Browse over remote connections (Preview)
• Use with the Live Preview extension
• Browser tools for agents
• Related

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

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 ⌥⌘/ (Windows, Linux Ctrl+Alt+/) 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

Address bar and suggestions

When you select the address bar, a suggestions picker opens to help you navigate. On a new browser tab, the picker opens automatically. Type a URL and press Enter to navigate. As you type, the picker filters your favorites and other suggestions.

To focus the address bar and open the picker at any time, run the Browser: Focus URL Input command or press .

You can control the picker with the keyboard:

• Press Esc to close the picker and switch to a plain input. Type to reopen the picker, press Enter to navigate, or press Esc again to focus the loaded page.
• Press Tab to move focus along the browser toolbar.

Search the web

You can search the web from the address bar, just like in a regular browser. Use the workbench.browser.searchEngine Open in VS Code Open in VS Code Insiders setting to choose a search engine: Bing, Google, Yahoo, or DuckDuckGo. The default value none disables web search and treats your input as a URL only.

When web search is enabled, the picker offers a search option based on what you type. Text that is clearly not a URL, such as a phrase with spaces, shows only a search option. A clear URL offers navigation first, then search. Ambiguous input that could be either offers search first, then navigation.

Favorites

To favorite the current page, open the address bar and select the star icon. The star icon stays visible in the address bar to indicate that the page is favorited. Favorited pages appear in the suggestions picker and filter as you type. Select a favorite to navigate to it.

Open tabs

On a new browser tab that hasn't navigated to a page, the suggestions picker also lists your other open browser tabs. Select a tab to switch to it. VS Code closes the new tab and activates the one you selected.

Recents and history

When you open a new browser tab, the suggestions picker shows a Recents group with the three most recent pages that you navigated to explicitly, such as by typing a URL. Pages that you reached by following a link don't appear in Recents.

As you type in the address bar, a History group shows up to six matching pages from your browser history. Select the remove icon on a suggestion to delete that page from your history.

To browse or search your full history, see Browser history.

Browser history

The integrated browser keeps a history of the pages you visit so you can revisit them later. History is available in all session storage modes except ephemeral.

To open the history view, press ⌘H (Windows, Linux Ctrl+H) or run the Browser: History command from the Command Palette. You can also add a History button to the browser toolbar from the toolbar overflow menu.

The history view lists visited pages grouped by day, with the most recent pages first. Type in the input to filter the list by page title or URL, then select a page to navigate to it.

To remove pages from your history:

• Select the Remove from History button on an individual entry.
• Select the Clear Entries for This Day button on a day heading to remove all pages from that day.
• Select the Clear All History button at the top of the view to remove your entire history.

Clearing browser storage also clears the history for that storage scope.

History is tracked separately for each storage scope. Global sessions share history across workspaces, while each workspace session keeps its own history.

By default, the browser keeps up to 200 history items per storage scope and removes the oldest entries when the limit is reached. Use the workbench.browser.maxHistoryEntries Open in VS Code Open in VS Code Insiders setting to change the limit. Set it to 0 to disable history.

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:

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.

Launch a debug session

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

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: