Continuing from the last months Chrome resolution testing, we are going to test tools from Firefox. None of the tools listed simulate mobile devices. So for mobile testing the mobile web address will have to be manually used, as the browser won’t be recognized as a mobile device. Unfortunately this will not work with every site, and even on sites that work, some pages may not be displayed correctly.
FireSizer
This add-on uses the Add-on bar at the bottom of the Firefox window. Unfortunately this feature was removed in Firefox version 29+, so an additional add-on is required to make it work (https://addons.mozilla.org/en-US/firefox/addon/the-addon-bar/). After installing the add-on bar it will appear at the bottom of the screen, from where the FireSizer can be used. The FireSizer will be located in the bottom right of the screen. It will show only as the current window resolution, right clicking the displayed resolution shows additional options. You can select from existing presets, or add you own. You can also save the current window size. This add-on doesn’t resize only the HTML area (viewport), but takes into account window borders, top/bottom status bars, menus, navigation buttons, etc. This isn’t so good for mobile testing, but makes more sense for desktop testing.
ResizeIT
ResizeIT is a little different add-on. You can set only 4 presets, however you can access them with ALT + numbers 1-4. This allows for fast testing if you only have 4 pages to test, for more than 4 pages you will have to go to the add-ons page and set new resolutions. You can either manually enter the desired resolution, or have the add-on remember the current browser size, also the window position can be saved as well. The add-on unfortunately doesn’t simulate mobile devices, so if you want to test a mobile site you will have to manually use the mobile web address.
Responsive Design View (Ctrl + Shift + m)
This is not an add-on, but part of the Firefox Web Developer Tool (also the part of Chrome). It is accessed through Tools -> Web Developer- > Responsive Design View or by pressing Ctrl + Shift + M in Windows/Linux (Web developer options are available after pressing the F12 key, too). It will correctly work with most mobile sites and display them as a mobile device would. The screen is pretty minimalist, having only a few, but useful options. The resolution size can be changed by selecting an existing preset from the drop-down menu, or clicking and dragging on the controls on the bottom and side. Next is the Portrait/Landscape button which allows you to change the orientation of the page, a necessity for mobile testing. After it is the Simulate touch events button, an option which translates mouse events into touch events. And in the end you have the Take a screenshot button, which take a screenshot of the content area. The screenshots are saved to the default browser download location. (Hint: Resize your browser with the desired height and weight and change the browser between the adjusted largeness and the maximized browser by turning on and off the option.)
Similar Posts from the author:
- Some useful information for Android and IOS testing
- Mobile friendly Algorithm
- Test management tools and Zephyr
- What is the best site or where to find quality material for learning?
- Do you want to make a Pic? Use PicPick.
Recent Comments