firebug Firefox Plugin is great for web site design debugging

Posted by Jason Ciment

Friday, 10.24.2008 1:37pm

Chrome isn’t ready yet for the big leagues because it doesn’t integrate with Auto Form Fillers like Google’s own SEO friendly toolbar, or Roboform so we still use Firefox and IE when doing web site design projects in our Los Angeles based LaDezign.com. That’s why today I’m writing about a new plugin for Firefox called Firebug which puts a wealth of web development tools at your fingertips while you browse a web site.

  1. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  2. Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
  3. Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
  4. Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
  5. When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.
  6. Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.
  7. Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast. The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities to execute javascript on the fly.






Subscribe to my Blog

Sign up to receive Postings via Email. Your Email will not be shared with anyone.