Visual Studio Code has recently unveiled a powerful new feature: an integrated browser embedded directly within the code editor. This new tool is accessible through the command palette using the command ‘browser open integrated browser’. This innovative integration promises to enhance the developer experience by consolidating code editing and web navigation.
The integrated browser leverages the Chrome DevTools Protocol (CDP) and uses Chromium-based tabs, which marks a significant update from the previous iframe-based Simple Browser. Developers can now enjoy full-fledged browser capabilities, including DevTools, find-in-page, and keyboard shortcuts, seamlessly within the VS Code environment. Furthermore, the browser supports persistent storage, both globally and at the workspace level, ensuring smooth and consistent user interactions.
A standout feature of this new browser is the AI-powered integration that allows developers to add page elements as context for AI chat, complete with automatic screenshots. This not only includes interaction capabilities but also enhances AI debugging processes. With the ability to select page elements and inject HTML or computed CSS into the chat context for Copilot, developers can streamline their coding and debugging workflows. In addition, console logs can be forwarded to chat for more effective troubleshooting and debugging directly within the VS Code interface.
Moreover, the enhanced browser supports authentication processes, including OAuth and two-factor login flows, ensuring secure access to various services directly from the editor. Looking ahead, a preview of the upcoming ‘share with agent’ feature suggests even greater functionality; by utilizing Playwright/CDP, the AI agent will be able to autonomously interact with the browser tab to test apps and identify bugs, essentially closing the loop between code development and browser testing within VS Code itself.
This new integrated browser represents a significant step forward in combining development and browsing tasks, making it a compelling feature for developers seeking a more efficient and integrated workflow.

Collections

VS Code has introduced an integrated browser built on the Chrome DevTools Protocol (CDP) with Chromium-based tabs, replacing the older iframe-based Simple Browser. It brings full DevTools, find-in-page, keyboard shortcuts, and persistent storage into the editor. A key highlight is AI-powered integration with GitHub Copilot: developers can add page elements as context for AI chat, forward console logs, and inject HTML or computed CSS for debugging. The browser also supports OAuth and two-factor authentication flows. An upcoming 'share with agent' feature will let AI agents autonomously interact with browser tabs via Playwright/CDP to test apps and identify bugs.

Introducing VS Code's Integrated Browser