Web Inspector

There’s a little gift inside of every web browser, and it’s called the “web inspector”. Take a moment to learn about them. You’ll get to see how a website is really made.

The Web Inspector

The Web Inspector allows you to see what a website is really made of (i.e. the code/HTML) and the tricks to get it to look like that (i.e. the styles/CSS).

The Inspector’s Home: the Browser

There’s lots of web browsers to choose from. Of the many, we will look at the basic three to simply make the introduction to web inspectors.

For users working mainly with HTML and CSS (the true core of most websites), the web inspector is a great help. Here are instructions for:

More links and summary information can be found below.

Safari:

A handy (and comprehensive) guide has already been posted, and though it is based upon Safari v.5, much of it still applies : Use Safari 5′s Web Inspector – a gift for web developers.

If the above isn’t enough or up-to-date information is needed, official instructions on enabling the developer tools within Safari can be found at the Developer Tools for Safari Overview.

For a summary, see below:

  • Open up Safari
  • Enable the Develop menu by clicking Safari > Preferences > Advanced and then the “Show Develop menu in the menu bar” checkbox (the menu bar is the area at the top of the screen that has “File”, “Edit”, “View” etc.). The Safari developer tools are now enabled.
  • Click on Develop in the menu bar and select “Show Web Inspector“. Alternatively, right-click on your webpage (specifically on the div or element whose css is misbehaving) and select Inspect Element.
Chrome

For instructions on enabling the developer tools within Chrome, visit the Chrome Developer Tools Overview.

For a summary and common use case with CSS (c/o Brown University), see below:

  • Open up Google Chrome.
  • Right click on your webpage (specifically on the div or element whose css is misbehaving)
  • Select Inspect Element.
  • It should pop up a window at the bottom of the browser that looks a bit like this:
    web-inspector-screen-shot-475
  • You should see that the misbehaving element is highlighted in blue in the left panel. If it is not, mouse over the element again and right click and Inspect Element again, it should now be highlighted.
  • In the right panel you will see a styles accordion, expand it if it is not already.
  • In the styles accordion you will see which style rules are applied to the element and from which line of css they originate.
  • To change an existing rule, double-click on that rule.
  • To add another rule to just that element, click to the right of the closing brace, and start typing:
  • To disable a rule, hover your mouse over it and then uncheck the checkbox on the left of the rule.
  • To see what an element looks like when :hover is active, click the icon on the accordion banner with a mouse over a dotted box:
    Screen Shot CSS Pseudo-classes
  • You can click on the filename:linenumber next to the rule to see the specific text for that rule.
  • To validate your css, use http://validator.w3.org/#validate_by_input
Firefox

The web inspector for Firefox, called Firebug, is what got the party the started. To get acquainted, visit the Firebug Introduction page or watch the video below.

Finally

A Web Inspector is both for checking, maintaining and troubleshooting your own site, and also for learning from the structure and styles of other websites you visit. It is a most used and depended upon tool for website owners and developers alike.