The art of testing mobile apps has been in the spotlight over the past couple of years. With new devices, operating systems, and technologies emerging every day, it’s becoming more and more impossible to test for all possible scenarios.
In this article, we’ll explore how to use a chrome extension for mobile testing to help you overcome these challenges. We’ll also show you how to get started with your own extensions in just three easy steps!
Table of Contents
Chrome Extension For Mobile Testing
Google Chrome is the most popular web browser in the world right now. Most of the software testers undoubtedly kept Chrome as their primary browser.
Chrome supports an immense repository of extensions that make our daily tasks easier and increase productivity.
15 of the best Google Chrome Extensions for Software Testers
Let’s see chrome extensions for web testing in detail.
#1. LambdaTest Screenshots
LambdaTest is one of the highest-rated Chrome extensions available in the web testing domain. With a single click, you can capture screenshots on up to 25 different browser and OS configurations.
All screenshots will be captured on 2000+ real browsers running on real operating systems on cloud-based real machines. For mobile browsers, this extension uses emulators and simulators running real browser apps to take a full-page mobile screenshot.
Features:
- Access to 2000+ different mobile and desktop browser and OS combinations.
- Integrations with various bug management tools like JIRA, Asana, Trello, Slack, GitLab, GitHub, Bitbucket, VSTS.
- You can view test logs of past run test and re-run the same configuration
#2. Bird Eats Bug
Bird Eats Bug is a no-code SaaS tool that allows even non-technical users to create interactive data-rich bug reports that help engineers deliver better software faster. While a user makes a screen recording of the issue, Bird Eats Bug’s browser extension automatically augments it with valuable technical data like console logs, network errors, browser information, etc. Such reports allow software engineers to find the cause of the problem a lot faster and avoid unnecessary back-and-forth.
- Auto-include console logs, network requests, and general info like browser/OS or screen in every report
- Use mic and/or video recording to explain your actions and save time on typing descriptions.
- Integrations with various issue trackers like JIRA, Trello, and Linear
#3. Window Resizer
This extension re-sizes the browser’s window in order to emulate various resolutions. It is particularly useful to test the layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order).
You can set the window’s width/height, window’s position, preset icon (phone, tablet, laptop, desktop), and even the option to apply the new dimensions to the entire window or just to the viewport. The extension also features customizable global key shortcuts, an option to export your settings and import them on another computer, and more.
#4. IE Tab
IE Tab exactly emulates IE by using the IE rendering engine directly within Chrome. This will enable you to use ActiveX controls and test your web pages with different versions of IE (IE6, IE7, IE8, or IE9). It allows you to create a list of URLs that will automatically open in the IE Tab. It also supports MAC & Chromebook.
#5. Bug Magnet
It’s an exploratory testing chrome extension. Adds common problematic values and edge cases to the context menu (right-click) for editable elements, so you can keep them handy and access them easily during exploratory testing sessions.
It allows convenient access to common boundaries and edge cases for exploratory testing. It works on input fields, text areas, content editable DIVs and works on multi-frame pages, but only if they are from the same domain.
#6. WAVE Evaluation Tool
WAVE is a web accessibility evaluation tool developed by WebAIM. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues.
All analysis is done entirely within the Chrome browser allowing secure valuation of intranet, local, password-protected, and other sensitive web pages. To run a WAVE report, simply click on the WAVE icon to the right of your browser address bar, or select “WAVE this page” from the context menu.
#7. Clear Cache
Quickly clear your cache with this extension without any confirmation dialogs, pop-ups, or other annoyances. You can customize what and how much of your data you want to clear on the options page, including App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords, and WebSQL. Cookies can either be removed globally, only for certain domains, or for everything except for certain domains.
#8. Awesome Screenshot: Screen Video Recorder
Awesome Screenshot is the highest-rated screen capture & image annotation tool on Chrome. It allows you to capture all or part of any web page. You can add annotations, comments, blur sensitive info, and share with one-click uploads. You can also capture the desktop. The default option for saving an image is now storing the image on an awesome screenshot website with no time limit.
#9. Screencastify – Screen Video Recorder
It captures edits and shares videos in seconds. You can record unlimited recordings for up to 5 minutes each with no watermark. You can trim your videos and export them even though you are a free user.
#10. Resolution Test
This extension allows you to test web pages in different screen resolutions, with an option to define your own resolutions.
It changes the size of the browser window to preview the website in different screen resolutions. It includes a list of commonly used resolutions and the ability to customize that list.
#11. Page Ruler
This extension allows you to draw a ruler to any page and view the width, height, and top, bottom, left, and right positions. You can also drag the edges of the ruler to resize it. Use the arrow keys to move and resize the ruler.
#12. EditThisCookie
EditThisCookie is a cookie manager. You can add, delete, edit, search, protect, and block cookies.
#13. Ghost Inspector – Automated Website Testing
Ghost Inspector is an automated UI testing and monitoring tool. It allows you to record yourself performing actions on your website within your browser, then sync them to the Ghost Inspector service and run them continuously as a regression test.
You can record them on your staging server and execute them through its API when your code changes — or record them on your live site and automatically run them at a set interval to continuously check for issues. You will need to sign up for a Ghost Inspector account to use our tool.
#14. Grammarly for Chrome
From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself. You’ll get suggestions from Grammarly as you write on Gmail, Twitter, LinkedIn, and nearly everywhere else you find yourself writing.
Grammarly is a writing assistant that goes deeper than grammar to offer you comprehensive writing feedback. You can be confident that your writing is not only correct but clear and concise, too. Be sure to register your account to receive a personalized writing report each week to help you track your progress and identify improvement areas.
responsive chrome extension
Wondering how to check responsive website in chrome? You can use chrome extensions for responsive design. Do you know how many responsive chrome extension exist? You may not be surprised that there are more than a dozen really useful responsive plugin at chrome marketplace.
Job of a responsive web design tester as well as developer can be much easier with these chrome addon.
Google Chrome is no longer a thing for the geeks but this minimalistic web browser has now become quite a popular choice, all over the world. This is not surprising in the wake of the remarkable job that Google has done in coming up with some excellent features that can blend in with your Google account.
Till now, the habitual IE or Firefox users were hesitant to give up their favorite web browsers as they found the integrated plug-ins or add-ons extremely useful. However, the Chrome extensions introduced by Google are the answer to this. These extensions have successfully replaced or replicated the functionality of plug-ins found in a typical browser.
For the first time ever in May 2012, Google Chrome edged out Internet Explorer as the most popular web browser. To achieve this position, Google has strategically added a range of plugin to Chrome and improved its features extensively to add synchronization with a range of web applications. These plugins are effective in creating, building, analyzing, maintaining and improving of websites. The given extensions on Google Chrome provide a plethora of features required for promoting cross-platform compatibility, robustness and scalability of a responsive website.
Below given are a set of responsive chrome extensions that you might find useful during responsive web design:
Responsive Image Helper Extensions
Image Size Info
This responsive chrome extension provides information about the image height, width and file size. Even file date as reported by the server is provided, however it may not always be accurate.
Simple Image Resizer
This resizes photos and images while retaining its quality; the mechanism offered is simple and effective.
Testing Responsive Resizing
Window Resizer
The window browser can be resized to show many screen resolutions using a Window Resizer. It is useful for web designers who want to test their layouts on different resolutions on laptops, desktops and mobile devices.
Testing Mobile Websites
User Agent Switcher
It switches between the user-agent strings to help develop a site that can work on both mobile browsers and desktops. User-Agent Switcher for Chrome is the answer for your need to switch quickly between user agent strings.
HTML And CSS Extensions
CSS Reloader
It Allows Reloading Of CSS Of Web Pages Without Reloading The Page. The Keyboard Shortcuts Can Be Customized Under This Option. At A Fraction Of A Second, People Can Get Their Page Reloaded Which Can Done By Clicking Either The F9 Key Which Is Allotted For It (which Can Be Changed As Per Customer Requirement) Or Just Clicking On The Name In A Drop Down Toolbar.
Debugging Extensions
Web Developer
It adds a button with integrated web development tools. It is the web developer extension port used by Firefox which provides a development framework to web application developers.
Fonts Related Extensions
What Font
This extension can effectively inspect the web fonts. You need to hover over the font to find out the type of font.
The strategy to empower web developers and site owners by providing free and valuable toolkits such as the ones described above, has helped Google dominate the web browser market. These extensions basically provide a platform to test interoperability of website design and augment user-friendliness. These tools not only increase productivity in a website, but eventually boost website traffic.
Google Chrome, with its new set of extremely innovative and useful extensions, is like a dream come true for those web developers who deal with responsive design and wish to enhance their productivity. With the help of the above given extensions, you will easily be able to design and produce a highly responsive website.
Legacy Addons: Not available anymore
Some old addons are not available for chrome anymore. Those are listed below.
Resizer
It allows changing dimensions of web page for devices such as tablets, mobile, desktop computer, also testing the designs.
Responsive Web Design
It tests the responsiveness of web designs on Google Chrome. Its web version can be found on responsive.victorcoulon.fr. Interestingly, this extension does not have a customizable resolution option.
Responsiview
The tool tests the website in a given browser size. The aim is to test responsive design media queries and screen configurations which support tablet view (portrait orientation at 768 x 1024) and mobile-based view (portrait orientation at 320 x 480 and landscape orientation at 480 x 320). On clicking, a new window pops up for the current tab for a given window dimension. One can customize height and width as per requirements as well.
Responsive Inspector
It is a simple tool which allows viewing the media queries related to the previously visited website. It gives a responsive web layout to the pages that can be seen visually and also shows the resolutions found in CSS stylesheets. Along with this, the Pixel Perfect browser resizing, page screenshots for saving pages, CSS media query code viewing and web design sharing are also provided.
Responsive Web Design Tester
This is a responsive web design tester addon for chrome. This extention supports multiple mobile device screen size and browsers.
This makes extension makes responsive testing in chrome must easier.
Mobile Toolkit
The toolkit checks the compatibility of a website on a mobile device. It validates the code of the webpage for mobile compatibility and checks it on emulators to provide documentation to improve its compatibility. Furthermore, the extension offers one-click code validation, mobile render emulation, language reference and mobile developer resources.
Mobile Tester
It aims to test mobile websites having numerous resolutions by emulating its screen resolution and user agent. It can test several mobile devices in tandem.
W3C HTML5 & CSS3 Validator
It is a shortcut button used for quick validations. It is not a local or offline validator and has the option of showing warnings and errors. Moreover, with this extension, validation can be customized — it can be set to automatic or manual, personal or public.
HTML5 FileSystem Explorer
It gives file browser access to file systems in Google Chrome sandbox. The tool is a must for developers working on FileSystem API as its helper extension provide developers browsing into the content of a local web FileSystem created through FileSystem API.
Firebug Lite
It is an activation scheme which is simple to install. The button is greyed out as you visit the webpage when it is deactivated. Once clicked, it will turn orange and will activate firebugs for the pages in the domain. The aim is to report bugs to Google.
Performance Tuning Extensions
Speed Tracer
The tool helps to identify problems and fix it in web applications. A developer can get web page metrics from the browser and it can be examined as the application runs. It gives a clear picture of the time spent on various applications. For example, JavaScript parsing, DOM Event handling, layout and CSS style recalculation. This feature is available in Google Chrome 18 or later versions.
YSlow
The tool helps to analyse the web pages and improve performances which are based on rules for high performance. YSlow provides information related to page performance, components, summarizes the component details and shows statistics related to the web page.
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines