Basics of Developer tools for Testers

Developer tool is an add-on of Mozilla which helps to debug the elements in a web page. You can get the tool from Add-ons (go to Add-ons and install web developer Tools (Add-ons > install web developer tools). On complete installing the Add-on, you can see a menu bar with items like disable, cookies, images, miscellaneous etc. You can use these items to measure, re-size, disable images, view source code, responsive view etc.

For checking the height and width of the elements in a web page select the option miscellaneous > select display ruler > mouse hover on the desired portion and check the width and height displayed in the menu bar.

If you want to view a web page with only contents, we have the option to disable the images. Here click on the drop-down images and select disable images. Likewise you have the options to disable cookies, disable styles etc.

For viewing the responsive layout of the page, select resize >view responsive layouts. While performing retesting, you often need to clear the caches. This can be done by selecting the option miscellaneous > clear private data > clear cache.

Try out the tool and make your testing interesting:). Checkout other testing topics. Any more help? Get a quote now.