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.

Window resize chrome extension


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

Screen resolution test chrome extension


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.

Use toggle device emulation to emulate different screen sizes

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.

emulate devices in your browser using browser devtools

Author

  • Rogerio da Silva

    Rogerio da Silva is a Brazilian who lives in the UK for a little over two decades. He is the owner of a test consulting and outsources services for software development. He likes to blog, write and create content that teaches others how to live a better life.  He loves reading biographies of successful authors and dream builders because they inspire him to keep creating!
    You can contact Rogerio for anything related to Business & Test Analyst | Microsoft Dynamics 365 CRM | QA | Agile | Manual | Integration & Automation | DevOps | API | Cloud | AI | IoT | CRM | Website Consulting | Email Consulting | Facebook Ads | Social Media Marketing Plan | Sales Funnel | Looking for Scalable Services? InShore, OffShore or Hybrid. Interested? Ask me how we can help.

2 Comments

  1. duncnisbet

    Thanks for posting Rogerio – always good to have more tools in the toolkit!

    2 questions I have – what do these extensions give me over the Chrome dev tools mobile emulator please? Why should I should I use them over Chrome dev tools?

    Thanks,

    Duncs

    • Firstly, apologies for taking a few years to reply.
      I’ve since then have moved into Edge (Chromium) but also use Chrome for automation tests.
      Both have the same feature as both made from the same structure.

      I have featured your suggestion in that post.
      You are right. It is probably way much better to use a native feature that is already built in the browser dev tools rather than install one more extension in your browser.
      Good shout.
      Thank you.

Leave a reply

Publication

Now available on amazon prime

eBook (Amazon)

The Testers Book - An Unconventional Way to Software Testing - Revised Edition

Paperback (Lulu.com)

Podcast

Certifications