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