Web Browser Preview
Preview local websites directly in VS Code with responsive design testing capabilities.
Features
- 🌐 Built-in Web Browser - Browse and test local websites without leaving your editor
- 📱 Responsive Design Testing - Test your web applications across multiple device sizes
- 📱 Device Emulation - Realistic device frames for popular smartphones and tablets
- 🔄 Navigation Controls - Back, forward, reload, and URL input
- 🔍 Zoom Control - Adjust zoom level for better viewing
- 🔄 Device Rotation - Switch between portrait and landscape orientations
- 💾 Session Persistence - Your browsing state is preserved between sessions
Getting Started
- For best experience, add the extension to the Secondary Side Bar: Right-click the Web Preview icon → Move to → Secondary Side Bar.
- Open the browser: Press
Alt+W (Windows/Linux) or Option+W (Mac) or click the Web Preview icon in the activity bar
- Enter a URL in the address bar or use the command palette:
Web Browser Preview: Open URL
- Select your preferred view mode (Responsive, Mobile, or Tablet)
- For device-specific testing, choose a device from the dropdown menu
Responsive View
The browser automatically adjusts to fit the panel size and includes zoom controls for precise viewing.
Mobile/Tablet View
Easily test how your website looks on specific device sizes with proper device frames and orientation controls.
| |
