Preview your web applications in a mobile device viewport directly within VS Code. This extension provides a realistic mobile device frame with various device options to help you test and visualize your responsive designs.
||
|--|--|
Features
Preview your web app in a realistic mobile device frame
Choose from multiple device options (based on your license)
Automatic refresh when you save changes
Support for localhost and remote URLs
Customizable device selection
License Tiers
Mobile Preview offers two license tiers:
Free License
Limited to 3 iPhone devices
Basic refresh functionality
Works with any localhost
Pro License ($5 lifetime)
All iPhone devices
All Android devices
Tablet devices (iPad)
Custom device configurations
Multiple device preview
Priority support
Installation
Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "Mobile Preview"
Click Install
Usage
Open a web project in VS Code
Start your development server (e.g., npm start or yarn dev)
Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette
Type "Mobile Preview: Show" and press Enter
Enter the URL of your development server
Your web application will appear in a mobile device frame
Commands
Mobile Preview: Show - Open the mobile preview panel
Mobile Preview: Open Settings - Open the extension settings
Mobile Preview: Enter License Key - Activate a Pro license
Mobile Preview: View License Information - View details about your current license
Mobile Preview: Purchase License - Open the license purchase page
Mobile Preview: Deactivate License - Deactivate your license on this device
|
|
|--|--|