How To Find Web Element Using Web Browser Inspector

It is so easy to find web elements on the webpage now. All the popular browsers provide a web element inspector, you can easily check out the webpage structure use those built-in tool. Safari, Chrome, IE and Firefox all has it’s own built-in inspector. There is also a Firefox plugin named Firebug. Firebug provide some more features than the built-in inspector. Whatever browser and page inspecting tool you are using, you always need following steps to inspect a element in the webpage.

1. Enable Web Inspector
You should enable the inspecting tool first before using it. In any browser follow below steps.

1. Right click any web element in the webpage.
2. Click the “Inspect Element” menu in the popup menu list.

You can also press “F12” key in keyboard to achieve above task.

After above actions, a panel will be shown in the bottom or in the right of your browser. You can see the html code and some tabs in the popup panel. The red arrow pointed icon in below picture is just the Firefox inspector, click it to activate it.

enable web inspector for firefox

2.Select Web Elements
After activate the inspector you can move your mouse in the page. When you put your mouse over a web element, it is highlighted using dotted blue border with a black annotation which displays its HTML tag above the dotted blue border. The html code is also be highlighted in left-hand pane.

html annotation and html code displayed along the inspector

How to get the web element’s XPath using inspector? 

If you want to get the XPath of selected web element, you need to use Firebug Inspector in following steps.

But be noticed: You should not install FirePath, if you install FirePath following method will not take effect. You need disable it first.

  1. Right click your web page.
  2. Choose “Inspect Element With Firebug” menu in popup menu list.
    click Inspect Element With Firebug menu
  3. When you click above menu a panel will be shown at the browser’s bottom. When you select a html element, the related html code will be highlighted. Right click the highlighted html code, select “Copy XPath” in the popup menu list.
    copy xpath from firebug web inspector

If you want to know more about how to get XPath in other bowsers, you can refer following topic.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.