10 things you didn’t know about Firebug
Many of you heard of Firebug extension for Firefox mainly for javacript debugging but what you don’t know is that it’s a powerful tool for helping with CSS, DOM and could save you precious hours of work between page refreshes and debugging.
So without further delays, let me present you with 10 things you didn’t know about Firebug (and friends).
1) With the inspect tool you can select any element on the screen, view it’s properties and even modify them. You can change DOM properties, like adding or retrieving values to textboxes, disabling buttons or looking out for special properties.
2) You can finally visualize the box model of a div or other element that your design teachers were always telling you about it and understand why you have a extra border that shouldn’t be there or an unusual padding.
3) You can view CSS properties, including inherited values, which is great for troubleshooting but that’s not the best part. Now you can actually change these values without refreshing the page and thus saving valuable time.
4) The Console is really neat because you can input javascript commands and interpret them with your page contents, so it’s pretty useful for debugging, testing, troubleshooting problems or just experimenting because you get results on the fly as well.
5) You can also use the help of the Console for warning you about javascript or CSS errors.
6) If you worry about performance you can install the YSlow plugin, it will complement Firebug and add a few extra tabs.
Now you can find out how long a page takes to load or which component is the heaviest.
7) Yslow also has a nifty profiler which helps you by analysing your page and giving your advices based on a set of good practices from Yahoo on how to improve your page performance.
Another companion plugin is FireCookie which let’s you inspect and manage cookies on your browser.
And that’s it, so it’s not 10 things, sorry about that.
But I bet you must be pretty excited to try Firebug and speed up your development process.
For me it became a primary tool for web development and I believe it’s very useful for designers and coders. There’s a bunch of other tools I usually use which I think are a good complement as well:
- MeasureIt (it’s a ruler, it also gives you pixel height and width, neat!)
- ColorZilla (colorpicker, page zoomer and Lot’s of other goodies)
- Aardvark (some repeated features with Firebug but lighter and faster)
- Web Developer Toolbar (a classic, Lot’s of features but most useful include resizing browser, removing images, javascript, validating accessibility, etc)
There he goes again talking about CSS. You should let that for grown up people.
Just kidding…
Good Post! Very Usefull stuff for designers!
I even spoke about the box model.hehe:P
thanks!
Hi Pedro,
Did you know there’s a PHP console for Firebug (based on the console API):
http://www.firephp.org/
Is there anything similar for RoR ?
thanks for the tip. Very useful.
In fact, Rails already has a builtin console and his own logging system which does the trick:
“The console gives you access to your Rails Environment where you can interact with the domain model . Here you’ll have all parts of the application configured, just like it is when the application is running. You can inspect domain models, change values, and save to the database.”
Amy has a great article on many of the great stuff you can do on the console:
http://www.slash7.com/articles/2006/12/21/secrets-of-the-rails-console-ninjas
Obrigado pela dica da extensão!