Visual Studio Code demonstrates their new integrated browser, which allows developers to inspect, preview web sites, and leverage DevTools and AI chat context directly inside the VS Code editor.

The Browser in Your Editor: Integrated Web Preview in VS Code

Visual Studio Code now offers an integrated browser that lets developers preview and inspect their web applications directly inside the editor.

Key Features

• Embedded DevTools: Use familiar Chrome DevTools right within VS Code to debug and inspect UI, CSS, and JavaScript.
• Authentication Support: Log in to web applications with support for authentication flows directly in the integrated browser panel.
• Select Elements for AI Chat Context: Highlight elements in your web app to use as intelligent context within VS Code's AI chat features. This enables prompts based on real application state and UI.
• Streamlined Dev Loop: Preview changes instantly without switching to an external browser. This tight feedback loop helps you iterate on web projects quickly.
• Agent Enablement: The integrated browser is designed so that code agents and AI-powered tools can interact with your full web application context, opening the door to advanced in-editor automation and guidance.

Getting Started

• Install the latest version of VS Code from https://aka.ms/vscode/insiders
• Access the integrated browser from the command palette or view panel
• Explore documentation and tutorials:
  • VS Code v1.109 Announcement
  • Live Demos and Blog
  • Official Blog
  • Awesome Copilot Extensions

Use Cases

• Web application debugging and authentication flows
• Quickly verifying UI or styling changes
• Using AI chat context for targeted coding assistance
• Enabling agents or extensions to manipulate and test web applications

Additional Resources

• Visit the Visual Studio Code Documentation
• Join the community at VS Code Live

Video presented by Visual Studio Code.