On the fly CSS and more
Firebug. Oh Glorious Firebug. You give me a reason to love Firefox, despite its many horrible memory leaks. You give me hope that there are still people out there looking to help out designers/coders. You give me a reason to install extensions. You save me enough time and energy that I am able to write this post. Thank you Firebug, for being a friend.
Firebug is an extention for Mozilla Firefox that is designed to help web developers debug their code on the fly, as well as provide invaluable information as to the size, structure, and overall composition of a website you are developing. I’ve found some of its superfluous features are actually more useful in the real developers world than its actual intended purpose. Here are a few of my favorite things about the plugin:
1) On the fly CSS editing.
I discovered this on accident the other day, and have used it probably 50 times in the last week. Simply pull up your firebug, click CSS, and you can disable, change, and add CSS properties on the fly, and watch the browser render them in real time. Amazing. Great for finding just the right amount of padding for your text, or where the heck to put that “clear:float” property. You can use it to try out some different text/background colors, or see if ‘border:1px solid black” really does make that sidebar look cleaner. You can inspect elements, and then see what and where CSS is applied to them, and edit it from there as well. Overall… it pretty much makes web design a breeze. Here’s a before and after shot.
2) The Yahoo! YSlow plugin. <– That’s a link. I swear it.
You’ll have to install firebug first. It’s a firefox plugin for firebug. It does not work stand-alone. It, however, does wonders for your Firefox installation.
Yslow will do a fairly comprehensive 13 point inspection of your webpage in order to help determine your bottlenecks. If you find the slowest parts of your site, and how to fix them… don’t you think thats a good step to making it faster? Here’s my main page:
Performance Grade: C (71) --------------------------- A 1. Make fewer HTTP requests F 2. Use a CDN F 3. Add an Expires header B 4. Gzip components A 5. Put CSS at the top A 6. Put JS at the bottom A 7. Avoid CSS expressions n/a 8. Make JS and CSS external Only consider this if your property is a common user home page. A 9. Reduce DNS lookups A 10. Minify JS A 11. Avoid redirects A 12. Remove duplicate scripts F 13. Configure ETags
Overall, it scores me at a 71% (C). For my page, that’s more that okay. I don’t need eTags, and I certainly don’t need to host my 3 images on another server. I should add an expires header to what I can to ensure proper caching. I’ll get on that.
Also, it will inspect all the elements on your page, and give them to you in one nice neat little readout. Here’s my homepage:
Empty Cache Primed Cache ------------------------------------------------ 1.3K 1 1.3K 1 HTML document 2.4K 1 0.0K 1 Style Sheet File 6.3K 1 0.0K 0 JavaScript File 115.5K 3 0.0K 3 Images 1.2K 4 0.0K 4 CSS Images 10 9 HTTP Requests 126.9K 1.3K Total size
Not bad… I’m sure I could cut the image sizes down a bit, but even on a dial-up connection, it’ll load in about 20 seconds. The good news is, that once the page is cached, there isn’t much to refresh for subsequent visits. cool.
3) Real-time Javascript debugging
Now, this is really what firebug was designed for from the beginning. I just happen to not use javascript much, therefore finding the previous uses coming more in handy. I’m not going to rewrite the documentation for firebug, but I’ll give you the basic idea.
You can insert breaks into your javascript to help see where and when something is going wrong. Couple this with the ability to watch variables real-time (while your javscript is paused), and you’ll feel like you have the control of quickbasic 4.5 pro… (lost?) Visual Basic 6.0? Still too old? Okay… the control of a 2007 Shelby. *Sigh*. A lot of control. A really lot of control.
4) Whisper quiet debugging
There are more methods than I’m going to list (again, read the documentation), but the most useful for me is the
console.log() method. it allows you to output information to the firebug console without having to use annoying “alert()” windows or outputting text that will impact your site format. You could even put little easter eggs on your site for those who use firebug….
| 2.9 |
Stumble it!
Post Info
This entry was posted on Wednesday, October 24th, 2007 and is filed under css, development. It has 92 viewsComments Feed. | Leave Comment | Leave Trackback.
Previous Post: Make money by posting »
Next Post: Club 390 »
