Tools to locate web elements

In this chapter, we will study the mechanism to locate web elements on web browser Firefox, Google Chrome and Internet Explorer.

1) Locating tools in Firefox
Firebug is a Mozilla Firefox add-on. This tool helps us in identifying web elements on a web page. 

How to install and use Firebug?

For the ease of understanding, we would bifurcate the installation process into the following steps.

Step -1: Launch the Mozilla Firefox browser and navigate to Firebug add-on download page. The URL takes us to Firefox add-ons section.

Step -2: Click on the “Add to Firefox” button present on the webpage. 

Step-3: As soon as we click on the “Add to Firefox” button, a security alert box would appear, click on the “Allow” button now.

Step-4: Now Firefox downloads the add-on in the backdrop and a progress bar is displayed.

Step-5: As soon as the process completes, software installation window appears. Now click on the “Install” button.

Step-6: As soon as the installation completes, a pop up appears saying that the firebug has been installed successfully. Close the pop up.

Step-7: Now to launch firebug, click on the firebug icon present in the extreme top-right corner of the Firefox window OR Click on Firefox Tool bar -> Web Developer -> firebug -> Open Firebug.

Step-8:

Once you open the firebug, it displays all the HTML properties belonging to the current web page. Expand the HTML tab to view the properties of all the web elements belonging to the current web page.

To locate the desired element within the web page is to right click on the desired web element and select “Inspect element with Firebug”. The HTML property belonging to that web element would be highlighted in the developer tool. 

2) Locating tools in Chrome
The google chrome has the developer tool comes readily bundled with it.
To launch the tool Press F12.

You will see something like the below screen.

Take a note that Element  tab is opened in the above screenshot.

Thus, element tab is the one which displays all the HTML properties belonging to the current web page. 

You can also launch developer tool by right clicking anywhere within the web page and by selecting “Inspect element”.

To locate the desired object within the web page is to right click on the desired web element and select “Inspect element”. The HTML property belonging to that web element would be highlighted in the developer tool. 

3) Locating tools in Internet Explorer

Like Google Chrome, Internet Explorer also has its own Developer Tool that can be used to identify web elements based on their properties within the web page.

User is not required to download or install any separate plugin, the developer tool comes readily bundled with Internet Explorer. To launch the tool Press F12.
You will see something like the below screen.

Please note that “DOM Explorer” tab is opened in the above screenshot.

Thus, DOM Explorer tab is the one which displays all the HTML properties belonging to the current web page. 
You can also launch developer tool by right clicking anywhere within the web page and by selecting “Inspect element”.

To locate the desired object within the web page is to right click on the desired web element and select “Inspect element”. The HTML property belonging to that web element would be highlighted in the developer tool.

<-- Previous || Next -->