Two Chrome extensions for software testing – Emulate different Screen Sizes

There will be moments in your tests tasks on web applications that you need to know if things will fit together in particular screen sizes. These Chrome extensions can help you do just that.

#1. Window Resizer – Window Resizer is another chrome extension handy when testing web applications. It does for Chrome what Firesizer does for Firefox – re-size the browser window to emulate different screen resolutions allowing you to test how website layout behaves on different screen sizes. You can select from preset screen resolutions or add your custom resolution size (and save them). A few features that Window Resizer has and Resolution Test doesn’t – Window Resizer allows you to set customizable global key shortcuts. You can also export your settings and import them on a different computer.

#2. Resolution Test – Resolution Test makes it easier to test web applications on different screen resolutions and sizes. You can choose from a list of the most common screen resolutions websites use or use a custom size as per your need. It re-sizes the browser window and emulates the web application in the screen size you need.

Or if you prefer not to install a Chrome extension, you could just use the native ‘toggle device emulation’ to emulate different screen sizes right there out of the box as per suggestion from @duncnisbet pointed out the other day. Thanks. 😉

You may already know this but in case you don’t, just right-click anywhere on the page you wish to emulate, then click in ‘Inspect’ to bring up the DevTools on screen then click in the ‘Toggle Device Emulation’ as indicated in the screenshot below and that’s it.

You can pick and choose the screen size from the option set ‘Dimensions’ and you can pick and choose your favourites.

The features you can edit in the settings are pretty good. As well as filtering which devices you would preferable have in your shortlist, there are other pretty good settings that are worth exploring a bit more.