Emmet Re:view
Fast and easy way to test responsive design in Google Chrome
Hunter
MakersThere are no makers yet
DiscussionYou need to become a Contributor to join the discussion - Find out how.
I’ve created this tool for testing responsive designs in multiple viewports side-by-side. This extension creates multiple views (simple iframes) for a page currently opened in Google Chrome. All views are fully synchronized: scrolls, clicks, form fields fills, even mouse hovers, movement and dragging!
Re:view provides two modes for testing responsive design:
* Breakpoints View: extracts all media query breakpoints from current page and creates separate view for each of them. In this mode views can be resized, large view contents are downscaled to fit screen size so you can even test 4K resolutions on small screens
* Device Wall: a bird’s-eye overview of device-sized views. By default this view is zoomed-out to fit your screen size but you can hold Shift key and zoom in and out with mouse wheel and drag view to pan around. In this mode User Agent string (both HTTP header and navigator JS object) is overridden with real device user agent value; each view is scaled according to tag of the page.
My goal is to build a tool for faster responsive design development. It should already work with some live reload tools with CSS hot-swapping (LiveReload, BrowserSync) and I’m woking on integrations with LiveStyle (http://livestyle.io) for real-time CSS updates.
The ultimate goal is to replace Device Wall iframes with real device views from services like BrowserStack (please DM me if you can help me with it).
Sergey Chikuyonok
Hunter
@chikuyonok · Creator of Emmet.io and LiveStyle.io Upvote (1)Share·