1. Blog
  2. Design
  3. Concepts
  4. Debugging Basics
Debugging Basics - A Guide to Web Design Debugging

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


  • Code Accuracy

    • W3 HTML Validator: https://validator.w3.org/nu
    • W3 CSS Validator: http://jigsaw.w3.org/css-validator/
    • CSS Linter: http://csslint.net/
  • Speed & Performance

    • Pingdom Tools: http://tools.pingdom.com/fpt/
    • Google Webmasters: https://www.google.com/webmasters/
    • Cross Browser Testing: https://www.browserstack.com/
  • Metadata & Microdata

    • Facebook Debugger: https://developers.facebook.com/tools/debug
    • Google Schema Testing: https://developers.google.com/structured-data/testing-tool/

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 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
Firebug for Firefox Screenshot

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.
  • 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)

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.

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 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.



Related Articles
  • Creating a Post Joomla Author Bio / Joomla Author Box
    A brief author bio helps blog posts on several fronts & in this tutorial we'll show you how to create a Joomla author box from scratch. That means more blog content, added credibility, and no extra work for your clients!
    Creating a Post Joomla Author Bio / Joomla Author Box
  • Free Site Ranking Utilities
    Optimizing SEO can be a complicated task. Free site ranking utilities provide experienced web developers and newcomers alike, a helpful way to track progress and identify potential shortfalls.
    Free Site Ranking Utilities
  • How to use MAMP: Setting up MAMP
    Utilizing a local development environment is crucial for web developers, but it's not well documented. This guide to setting up MAMP will show you how to create your own PHP development server & how to use MAMP efficiently once you're all setup.
    How to use MAMP: Setting up MAMP
  • Organic SEO - Improving Natural SEO Results
    With the rise of paid ads and social traffic, Organic SEO has taken a back seat to many digital marketing companies. Although trends may be pushing against organic search, growing companies should see this opportunity for what it is...
    Organic SEO - Improving Natural SEO Results
  • Web Security Basics - How To Secure Your Website
    This post covers all the web security basics. This includes how to secure your website, plug holes, and avoid common website security threats.
    Web Security Basics - How To Secure Your Website
Videos
Written By:
Matthew Haeck

Greetings, I'm the lead designer and resident full stack web developer at Haeck Design. A majority of my time is spent creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade. (Matthew Haeck Bio Page)

Haeck Design - Stamp Logo