- About the author
- Jonathan Christopher
There are many tools available that assist with development for the Web. Some say that these tools can make Web development easier, and that’s true, but only to an extent. You can think of these tools for Web development as you think of a calculator for math. It can make problems easier to solve, but you’re still required to have sufficient prerequisite knowledge in order to properly use the technology. It’s at that point when certain tools can really help you to excel. By far, the best tools I have come across that have helped me with Web development are browser extensions, namely for Firefox. While many extensions are cross browser, I’m going to focus on Firefox because that’s the environment I work in every day by choice.
Some readers may find what I’m writing about to be “designing”, but writing markup and styling documents — to me — is development. If my choice of vocabulary seems wrong to you, I apologize in advance and I hope you can see past it for the length of this article and continue to offer your thoughts.
Firefox not only helps me to develop, it helps me to make my development process streamlined. As an up and coming developer, Firefox and a few extensions can help you to cover more ground faster than ever and really make it easier to visualize what’s going on. One of the biggest hurdles to overcome when first embracing CSS is learning what effect different styles or techniques will have on certain elements or even a document as a whole.
Chris Pederick’s well respected Web Developer Extension opened the doors for many people to Web development. The tools that the extension makes readily available help many people tackle the issues that may have otherwise been a dead end.
Instead of detailing what it is the Web Developer Extension can do, I’d rather give insight as to what I find myself using the extension for every day:
borderstyle to find out whether or not it was behaving as I was expecting (wrong or not). I’m not sure if this is common practice among beginners, but I still find myself outlining elements on a daily basis to see what’s going on. The Web Developer Extension really helps out in it’s ability to outline block level elements, positioned elements (floating, absolute, and the like) or any custom element of my choosing. It can really help when you’re in a bind about certain elements clearing (or not clearing) when you think they’re supposed to.
Those are the features of the Web Developer Extension that I find myself using most, and hopefully you are able to find one that will make your life a bit easier during your next project. The feature list is so impressive it takes time for someone to try out each and every feature.
I’ve always been a fan of Firebug, but not until it’s most recent release has it proved so indispensable. I’ve been reading some accounts of developers saying that it will be able to replace the Web Developer Extension. That’s unfortunate because they’re completely different tools which hold their own ground. If you were a carpenter, would you ditch your flathead screwdriver for a Phillips? Each tool has circumstances in which one may prove to be of more use than the other, so keep both at hand.
Firebug not only lets you inspect the DOM, it shows the applied CSS for everything, at the same time. On top of that, it lets you edit everything on the fly.
On the left you find the DOM, and on the right, any applied style is included. What’s really great is that the light gray ‘disable’ icon will actually let you control whether or not that particular style is applied to the element (think ON/OFF). I’m finding something like that to come in really handy from time to time when testing.
Clicking the actual property value of the selector lets you change them on the fly. If you want to change a font size or margin, you can do so instantly. Going further, you can also alter the markup using the DOM inspector in the same way. All in all the document inspection provided with Firebug is unmatched by anything I’ve seen before.
A neat feature that’s also offered with Firebug is what’s called network monitoring. If you’re familiar with the Web Page Analyzer, you’ll like network monitoring in the extension. Essentially, it will give you a visual representation of each file used in your document, and give you insight as to how long each particular file took to transfer.
This can come in handy to get an overview of the file download progression of a particular document and style. Having the ability to discover a bottleneck can help you improve overall load time for a project.
As with the Web Developer Extension, there’s much more to Firebug that I haven’t mentioned here. These are just the features I find myself using constantly and think they may be of definite use to people who don’t know about them yet.
I know that everyone uses their browser and extension arsenal in completely different ways. I’m always open to finding new and improved ways to make my life easier using extensions. There are countless extensions that can be added to a list of tools for web development, but the Web Developer Extension and Firebug are the two I’m constantly using day in and day out. Do you find yourself using either of these extensions constantly in any way that I haven’t mentioned? Were any of the uses I did mention something you hadn’t thought about before but might prove to be advantageous?