Inspector Clouseau: Bumbling your way through the basics of your browser's developer tool

There are certainly many of developer tools in the world, but this article covers only the latest versions of those built in to browsers and one other well-known exception.

What is a browser developer tool (web inspector)?

Simply put, web inspectors are tools inside of browsers to let you look in to the source of a page in more detail than merely viewing the source, and providing a window in to what goes on underneath the exterior. They are invaluable resources to debugging websites. Among the numerous features provided, they reveal the document structure (DOM) the browser actually sees, what CSS is applied to which elements, and what resources are requested.

As this site mostly has a CSS bent to it, the following sections will not cover all parts of a web inspector. It will cover enough to understand the basics of parts that relate to HTML and CSS. Though browser developer tools have largely converged on layout and operation, it may be preferable to view the sections pertaining to the browser you use most often for web development and debugging.

Happy debugging!