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. Read the rest of this entry »