Synchronized side by side responsive app/layout testing with Emmet Re:view

Why?
So you have a responsive web application and you want to test it side-by-side to quickly test how it looks at different resolutions and devices. Well, then this is for you. It talks about a very simple way to synchronously test the app side by side on multiple screen resolutions at the same time. There are better and much sophisticated solutions out there like GhostLab, Adobe Edge Inspect (probably stopped now), Blisk etc, but I do not want to go into that. Lets gets started quickly,

Getting Started
Ok, so I will be using the free Chrome browser extension Emmet Re:view to have this feature enabled. Its very easy to install it. On the home page you will see a link to install the extension inside Chrome browser

How to use it?
Once the extension is installed inside chrome, you will see a link to it inside the Chrome toolbar. Open your URL you want to test in your browser and then click on the Emmet button in the toolbar. It should open up the Emmet interface with your application inside the different viewports. Start testing now..

Features

    • Works with any HTTP url including localhost. Since its a browser extension so it lives in your browser.
    • Synchronized tests – you scroll, click on buttons, navigate between screens, all happens simultaneously.
    • Pick multiple device layouts/viewport sizes

Cons
Probably lacks inbuilt dev tools, but thats not needed. You can use the usual Chrome Dev tools (F12) to debug, see console logs.

You can find more details on the Emmet home page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.