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.0.3

• Some code fixes

2.0.2

• No change, except changelog update

2.0.1

• reduce bundle size

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