Inspect element in Firefox, Chrome or IE browsers

Inspect element in Firefox, Chrome or IE browsers

Mostly inspecting page is used by web developers or designers. But working as a software tester do we need to inspect element ? This is a question that generally asked by the software testers and the answer is Yes. Inspecting elements in the browser really helps to understand what happening exactly when http request goes to the server and response comes from the server. Also for those who are working for automation testing, inspecting element is essential part for them.

Why to inspect elements ?

There are many information that can not be seen on web page front end. But if you want to know really whats happening if your open any web page you can inspect elements.

Here are few features that you can find the information about web page by inspecting the page or any particular element available in the page.
1) For view purpose you can change any type in the page until the page reloaded and the same change you can do in back end. For example :

• BG color
• Font style
• Font size
• height of the page
• width of the page
• Alignment of any element in the page
• Padding of the page

2) You can get html information of any element or you can find the url added to any button or inside the page by clicking on Element.
3) You can get the Network information. Status of the response whether it is OK or any Error. You can find the size and load time of the page.
4) It helps to find the source of the web page.
5) Using console you can view if any error occurs during page load in the browser.

These are few important examples that you can perform by inspecting page or element in the browser.

How to Inspect element ?

You can inspect element in any browser. Here I am going to explain how to inspect element in Firefox and Chrome browsers.

Firefox :

You need one plugin called “Firebug” that needs to install in your Firefox browser. Please follow the steps to install firebug in your Firefox browser :

1) Follow the link ( Click Here ) and Download Firefox and install in your system.
2) Once Firefox get installed successfully go to tools and select Add-ons

3) After selecting Add-ons search for “Firebug”

4) Now click on Install button will install the firebug in your Firefox browser.
5) Once the firebug installed successfully you can load any page and right click on it.
6) After right click select the option “Inspect Element with Firebug”

7) Clicking on “Inspect Element with Firebug” will inspect all the elements available in the page or if you want to inspect any particular element, mouse over on that element and right click and select the same option will inspect the particular element.
8) Once inspected you can view all the information at the bottom of the page.

Chrome :

Chrome browser comes with default “Inspect Element” Option. You no need to install any plugin for this.
Simply open your page in chrome browser and right click on the page. Select option “Inspect element”.
Selecting the inspect element will inspect the page and will give you the result at the bottom.

Internet Explorer :

If you are using Internet Explorer, its little tricky.
1) Open internet explorer and load the web page in the browser.
2) Press F12 button in the key board will open the the inspect window at the bottom. In IE it is known as “Developer Tool”.
3) Pressing F12 again will disable the inspection of the page.
4) If F12 does not work, we have another option where you can open the developer too. Please follow the steps :
5) Open internet explorer and load the web page in the browser.
6) Click on Tools icon shown at right top and click on the option F12 developer tools.

7) Clicking on F12 developer tools will inspect the element and will show you the result at the bottom.
8) Same process you can follow to disable the developer tool or to inspect element.