Basics of firebug for software testers
Firebug, an extension of Mozilla browser is a very helpful tool to find the spacing between elements, padding, border and margin, font, font size and color of the text and many other things in a webpage. This article talks about the basic things we can perform using firebug in a tester's point of view.
Open Firebug
- To open the firebug go to Tools > Web developer > Firebug or simply press F12 in the keyboard.
- To check an element click the inspect button (image of a lens or small arrow) and click on the element in the webpage.
- On clicking the element you can see that it is getting highlighted. You can see the details of that element like style, layout etc in the right most session.
Firebug to find the measurements
If you want to know the measurements given for an element, you can either click on the layout tab in the right most portion of the firebug panel or check the details displayed under the style tab. The layout gives the margin, border and padding given and the under the styles tab you can get the details like border, height, width etc. You can also edit the given height, width and try out and ensure the look and feel of the page.
For checking the font, font size and color
Suppose you want to know the font, font size and color of a text, inspect the text and click on the tab titled computed. Here you can get details like font family, font size, font weight, color etc. Here, also you can edit the size and check the readability of the text.
For checking image
On inspecting an image, you can see that the image is represented as src= "imagename.extension". We can view that image by right clicking on the name and select the option 'open in new tab'. Now you can also save the image by right clicking the image opened in the new tab.
Like this, different things that we can do in a browser which are very interesting and may be helpful for testing, checkout other testing tips, and always be in touch with us. If you want any testing help, connect with us.
