The Browser in Your Editor: Integrated Web Preview in VS Code
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:
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.