Using Google Chrome, a Web Designer’s Experience, Part 2: Inspect Element

Firebug is like a baby made of candy. If you don’t get that analogy, no one will blame you but best not to bring it up around the hitching post, water cooler or back of the garbage truck, wherever you take your particular daily break. Suffice to say, this little plugin developed for Firefox is like having a twin brother who will go to school for you, do all of your homework, sit in the waiting room until the doctor is ready to see you and let you take his girlfriend home after he did all of the wining and dining.

The process for building websites in the past went a little something like this:

  1. Write some code in your favorite editor (I like Coda for Mac, FYI).
  2. FTP that to your website.
  3. Open up the site in your browser, wait for it to load. Wow, it’s all messed up.
  4. Edit the code back in your favorite editor (I like Coda, did I mention that?)
  5. Repeat steps 2 through 3, over and over again until Comcast calls you and says you’re using too much bandwidth and you find out you’re 93 years old for all the time spent waiting.

With Firebug, you just right click on an element and can edit the CSS values right there. Figure it all out, go back and make the changes in your editor, and you’re done.

The Firebug Element Inspector for Firefox

Google Chrome Element inspectorChrome comes with a built in feature similar to this, and it’s a lot like Safari’s Element Inspector. Both of those browsers differ from the Firebug plugin in one major way: they’re not as easy to use. Firebug opens up in a pane at the bottom of the browser window. Chrome’s Inspector opens in a new window of its very own, requiring crafty keyboard shortcuts or mouse clicking to go back and forth between browser and inspector. Weak.

That’s my only major complaint there, but it’s one of those little things that itches your knuckles just enough to keep you from wanting to use Chrome full time.

Up Next: Older We Go Up This Old Flag's Pole