Debugging Basics

on Sunday, 03 April 2011. Posted in Concepts

When web related problems arise, you need the right tools for the job.

That said, Wikipedia defines debugging as "a methodical process of finding and reducing the number of bugs, or defects, in a computer program or a piece of electronic hardware, thus making it behave as expected."

What you are simply doing is reverse engineering code. You are looking at what your output is and working backwards to see where it's coming from (and adjusting accordingly. Outside of an understanding of code, the best tool for debugging is a quality inspector - and there is no better inspector than Firefox's Firebug.

Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. With Firebug you can...

Inspect HTML and modify style and layout in real-time
Use the most advanced JavaScript debugger available for any browser
Accurately analyze network usage and performance
Extend Firebug and add features to make Firebug even more powerful

Firebug floats at the bottom of your browser and allows you to highlight specific elements and address the code that is creating the particular element.

Firebug Screeenshot

The blue box at the top of the screen is what my mouse was hovering over. The bottom left shows a macro view of the code... You will notice that the specific text is a line "<li>" and the bottom right box gives the css for that line. The real beauty is the ability to type in the bottom right box to play with some "what-if's". A simple example would be, "how would it look if I made the text gray?". That is as simple as typing color, hitting tab, and typing #999. Firebug is one of those tools that is absolutely necessary to produce clean, aesthetically pleasing sites... but as with anything in technology, I know people who have gone through years of coding without even realizing it exists. If you've never heard of it, don't feel dumb... but don't resist downloading it immediately to make you life incredibly easier.

There are some things that Firebug does not cover. Cross-compatibility for one...

Safari & Chrome’s Web Inspector

You need to enable the web inspectors that already exists in Safari and Chrome, but they are very easy:

Safari: open the preferences, check the “Show Develop menu in the menu bar” item
Chrome: open the preferences, check the “Show Page and Tools menus” item

These inspectors allow you to see the code that any specific page is rendering. It does not allow you the ability to delve deeper into individual elements. One tool that does assist in that thought is basically a stripped down version of firebug for safari, called safari lite. Here is the most current version 1.3.

Firebug Lite

Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome
Same look and feel as Firebug
Inspect HTML and modify style in real-time
Powerful console logging functions
Firebug Lite can be found here

Useful Firebug Add-ons

YSlow: Allows you to get in depth details of the size and speed of elements loading on a web page.
SenSEO: Allows you to check out the SEO elements on a web page.
CodeBurner: Good tool for beginners. It gives you a reference to explain what different pieces of code mean.
CSS Usage: Lets you see what CSS you're actually using (so you can eliminate the rest).

You can get by with these tools alone... but we like to use one more tool to check the rendering on all browsers (yes... even IE)

Adobe Browserlab

This tool gives you the ability to view a variety of renderings (for most all modern browsers). You can also layer them on top of each other (called onion-skinning) to see what differences certain browsers will render.

Adobe Browserlab Screenshot