Dissecting Web Pages with These Three Tools

Anytime I run into a web page design I like, I’ll spend some time looking under the covers to see what’s ticking.  To help me do that there are some tools that make it very easy to spy on your favorite web pages.  Even change a site’s page elements on the fly to see what a change would like.

1. View Page Source

Before some of these tools were freely available, you’d have to use the browser’s View Page Source menu item to look through the HTML for keys on how things were done.  This is not a tool so much as a built in feature of every browser out there that you can use like a tool.  You can certainly still use this method and sometimes it’s the quickest way to find the information you’re looking for if you know HTML and CSS.

For instance, finding out what the meta tag description of the page or what keywords were used , could be found at the top of an HTML view of the page (see below).  It doesn’t get any quicker than using View Page Source.

In fact, if you’re just learning HTML and/or CSS, viewing a whole page of the stuff and reviewing what it all means is a good way to dig in and learn.  You can use sites like W3Schools.com or HTML.net to help you understand the various elements of a web page.

2. PixelRuler

Mioplanet’s Pixel Ruler is a nice little tool that is an on screen ruler.

The ruler measures in pixels, so when you run into a design layout you like or the size of a banner or ad, you can use Pixel Ruler to quickly tell you what the measurements are.  You can easily drag Pixel Ruler around the screen by holding your left mouse button down anywhere on the ruler and dragging it.

The arrow in the upper left corner that circles downward allows you to turn the ruler vertical so you can measure page elements up and down.  Again, a handy little tool to measure the various page elements.

3. Firebug

Firebug is off-the-hook!!  It’s a Firefox add-on that allows you to pop open the lower part of your browser with a window that displays the HTML, CSS and much more from the page you’re viewing.

Firebug is a required tool to have in your web development arsenal.  You can drill down to elements on the page and change colors, font sizes, inspect the CSS to find out how a page is styled and much more.

So there ya’ go.  Three tools to help in your web development endeavors.  Any favorite tools you like to use?

Photo Credit: jhritz