Inspecting pages and elements with Mozilla Firefox

The newer versions of Mozilla Firefox provide built-in ways to inspect the page and elements. To inspect an element from the page, move the mouse over the desired element and right-click to open the pop-up menu. Select the Inspect Element option, as shown in the following screenshot:

This will display the Inspector tab with the HTML code in a tree format with the selected element highlighted, as shown in the following screenshot:

Using Inspector, we can also validate the XPath or CSS Selectors using the search box shown in the Inspector section. Just enter the XPath or CSS Selector and Inspector will highlight the elements that match the expression, as shown in the following screenshot:

The Developer tools provide various other debugging features. It also generates XPath and CSS selectors for elements. For this, select the desired element in the tree, right-click, and select the Copy > XPath or Copy > CSS Path option from the pop-up menu, as shown in the following screenshot:  

This will paste the suggested XPath or CSS selector value to the clipboard to be used later with the findElement() method.