Debugging Basics - A Guide to Web Design Debugging
To properly debug a website you need the right web debugging tools and an understanding of debugging basics. We’ll show you how to get started in web design debugging so you can have a beautiful site in no time.
Debugging as a design concept can be defined as "a methodical process of finding and reducing the number of bugs". But the goal isn't necessarily to find problems, but to find where the problems are originating from.
What to Address When Web Design Debugging
Crucial Web Debugging Tools
What you're simply doing is really "reverse engineering" the code. By looking at what your output 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 because that allows you to identify the problem.
Firebug for Firefox
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. 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.
Useful Firebug Add-ons
- YSlow: Allows you to get in depth details of the size and speed of elements loading 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)
- SenSEO: Allows you to check out the SEO elements on a web page.
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.
If you'd like a minimal debugging application, Firebig offers a lite version of it's debugging app. It doesn't allow the detail of the Firefox add-on, but it is available on almost every major browser.
- 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 downloaded with the link below
If you have any other ideas (or kind comments), please feel free to leave them below. Thanks for stopping by - now get back to work.