Web Inspector has made web development and debugging easier by allowing web developer to simply browse the live DOM structure of a web page in a collapsible compact structure user-friendly interface.

Different web inspectors have different features but most of them have some main common features and that are as follow:

  • Highlighting the node on the page while it is being selected in the DOM hierarchy.
  • By clicking a node you can dig deep into the DOM hierarchy which is perfect for debugging web pages with nested structures.
  • All the CSS rules applied to a selected node can be viewed under the “style pane” with the overridden properties crossed out. This live easy access to CSS styles is perfect for fixing cross-browser issues.

Latest versions of most of the major browsers have their own built-in web inspector tools. In most cases you can simply open up the web inspector by right clicking on a web page and then selecting “Inspect element” this is true for “Google Chrome” and “Opera”.

For Firefox you need to install the firebug add-on then you will be able to right click on a web page and select Inspect element.

For Safari you have to first activate the web inspector feature by going to “preferences” and then “advanced section” and check the “Show Develop menu in menu bar” checkbox now by right clicking on a web page you can click on “Inspect element” to open up Web inspector.

In case of IE you can access the internet explorer built-in web inspector by selecting the “developer tools” under the IE “Tools” menu.