Responsive Viewer
A Visual Studio Code extension for displaying responsive views for different devices in vs code, no need to switch to browser to check responsiveness of your web pages.
Access the extension
After installing, Ctrl + Shift + P and then type Responsive Viewer
Features
Enter page URL
Changing the url at any time will reload all the device frames, (only urls of the format http://localhost:* are allowed currently)
Add new Frame
This will add a new device frame and it can be configured to any device type from select options.
Add all Unique Frames
This will first clear the existing device frames and then will add a device frame for each of the screen in select options.
Sort frames by width
This will sort the existing device frames according to increasing width (left will be smallest, right will be largest)
Sort frames by height
This will sort the existing devices frames according to increasing height (left will be smallest, right will be largest)
Close All frames
This will delete(close) all the device frames
Release Notes
2.2.0
- Custom frame width and height inputs, with expanded desktop, iPhone, iPad, and Mac presets.
- Save, select, and delete view configurations containing frame sizes, device profiles, and labels. Unnamed configurations use incremental names such as
View Config 1.
- Frame duplication and per-frame editing controls.
- Preview zoom from 25% to 150%, with zoom buttons, a slider, and a reset to 100%.
- HTTPS URL support alongside
http://localhost URLs.
- Page checks for connection failures, certificate errors, HTTP errors, redirect loops, and common embedding restrictions, with Retry and Open in browser actions.
- Loading states and a Preview not showing? fallback for cross-origin failures that browsers cannot reliably report.
- A Run Extension in Project launch configuration that accepts a project folder and starts without debugging to avoid debugger connection timeouts.
- Redesigned the viewer with a dark toolbar grouped by page, frame, display, and management actions; rounded panels; and icon controls.
- Selecting a saved configuration immediately restores its frames using the current page URL; removed the separate Load View Config button.
- Renamed Open Page to Load Page. Loading a URL updates existing frames while preserving their sizes and labels, or creates a desktop frame when none are open.
2.1.0
- Move all the buttons to top
- Add custom labels for frames (requested by: https://github.com/sylphaxiom, thanks for the suggestion!)
- Hide labels, hide label input, hide screen size dropdown
2.0.3
2.0.2
- No change, except changelog update
2.0.1
2.0.0
- Change to React, fix close button on frames
1.0.1
- Bug Fix : Retain extension context between editor switching
1.0.0
- Initial release of responsive-viewer
| |
