The video introduces the new integrated browser in Visual Studio Code, allowing developers to open, interact with, and debug web pages directly within the editor using familiar tools and enhanced AI-powered features. The team demonstrates how this browser streamlines web development workflows by supporting advanced automation, customizable context sharing with the AI agent, and improved compatibility and security compared to previous solutions.
The video features Justin, Kyle, and Huin, developers from the Visual Studio Code (VS Code) team, introducing and demonstrating the new integrated browser within VS Code. They explain that this browser is built directly into the editor, allowing developers to open and interact with web pages without leaving their coding environment. Entry points to the browser include clicking localhost links, using the command palette, or responding to prompts from the built-in agent. The browser can display local web apps and offers features such as adding elements to chat, which provides the model with detailed context about selected HTML elements, including their attributes, computed styles, and even screenshots.
A key feature highlighted is the ability to customize what information is shared with the chat agent when selecting elements. Users can choose to include or exclude CSS and images, tailoring the context provided to the AI for more precise assistance. The integrated browser also supports developer tools similar to those found in standard browsers, such as inspecting elements, viewing computed styles, and monitoring network performance. This is made possible by leveraging the Chrome DevTools Protocol, ensuring a familiar and powerful debugging experience within VS Code.
Huin discusses the technical improvements over the previous in-product browser, which was based on iframes and suffered from compatibility issues with sites like Bing and Google, as well as broken authentication flows. The new browser overcomes these limitations by using the same technology as regular browser tabs, enabling full compatibility with modern web pages and authentication methods. Storage for cookies, local storage, and cache can be scoped globally, per workspace, or set to ephemeral, giving developers control over browsing data isolation. Additional browser features include standard keyboard shortcuts, find-in-page functionality, and seamless integration with VS Code commands.
Kyle provides a sneak preview of upcoming features, such as the ability to share the browser tab with the AI agent. This allows the agent to interact directly with the web app, performing actions like clicking, typing, and searching, effectively automating testing and bug discovery. This closes the loop for web development workflows, enabling developers to build, test, and debug entirely within VS Code, with the agent providing hands-on assistance and feedback. The integration with Playwright and the Chrome DevTools Protocol unlocks further potential for advanced automation and debugging capabilities.
The video concludes with a demonstration of the agent-assisted workflow, showing how the agent can help implement and validate new features, such as a shopping cart page. Many of the features discussed are already available in VS Code stable or insiders builds, with more enhancements planned for future releases. The team encourages users to try out the integrated browser, provide feedback via GitHub, and look forward to continued improvements that make web development in VS Code even more seamless and powerful.