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.
First and foremost: Web Developer Extension
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:
- Outlining specific elements
- When I first began working with CSS, I would constantly find myself giving certain elements a
border
style 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. - Disabling JavaScript
It’s so very important to constantly provide worthy alternate content in your documents. With JavaScript and Ajax being so prevalent and popular as of late, it’s really important to test your sites with JavaScript disabled. I find myself disabling JavaScript in my browser using the Web Developer Extension all the time, and with the convenience it provides, there is no excuse for not testing with JavaScript disabled. It also comes in handy for those times when obtrusive JavaScript makes browsing a particular site an annoyance to use.
- Disabling browser cache
- If you’ve ever put a website together from the ground up, you know that a browser cache can be disastrous for your process. Neglecting to disable it can provide you with endless frustration from not seeing a change that definitely should have occurred. Disabling the cache with a quick click of the mouse can be very beneficial.
- Disabling All Styles
- This feature is present in Firefox by default, but I’m constantly using the Web Developer Toolbar hotkey combination (CTRL + SHFT + S) to see what’s going on.. Semantics are really important to document structure and a great way to check up on your markup is to see your document naked.
- Disabling Images
- Image replacement is an ongoing discussion amongst many people in both Web design and development. A good way to check up on the way you’re using images is to see what a design looks like without images. From time to time, viewing your markup and style without images will let you know that some serious thought should be put into a new image replacement technique.
- View Image Information
- I often use this feature to refresh my memory about the images making up a particular design after not working with it for a while. Essentially it will give you an overview of all the included images in the document, including background images provided using CSS.
- Document Validation
- I know I’ve spoken about the HTML validation extensions available for Firefox and other browsers, but the Web Developer Extension also provides an easy way to submit your document for W3C Markup, Section 508, and WAI validation. Beyond markup validation, it also provides means to validate you feeds and CSS in the same menu — having each in a central place has proven to be very useful to me.
- View Generated Source
Going along with the aforementioned JavaScript features, another piece of the Web Developer Extension I find myself using is Viewing Generated Source. This comes in handy when you’re using JavaScript to manipulate the DOM and it isn’t behaving as you’d expect. Viewing any markup that’s a result of JavaScript is of great help when debugging or troubleshooting.
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.
While the extension is such a great tool to have, there are areas in which other tools can work faster and more effectively. One such area is working with JavaScript, bringing me to my next essential tool: Firebug by Joe Hewitt.
Firebug is an absolute must have
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.
When I first started using Firebug, it mainly proved valuable to me only for JavaScript. Having the Firebug console alone was a great feature to have for debugging. With the release of the 1.0 Beta, Firebug is in an entirely different class. As others have said, the style inspector is completely great, and the other features that are included are definitely useful on a day-to-day basis.
Document and style inspection
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.
File transfer monitoring
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.
Working with Firebug and JavaScript
By far, Firebug’s claim to fame was the ability to help developers work with JavaScript, and nothing has changed. Logging, error location, debugging, and on the fly execution of JavaScript all set Firebug apart from anything else and make it a must have for Web developers.
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.
Tips and tricks provided by you
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?
Comments
HTML validator(based on Tidy) is good quick check to see the HTML/CSS validity of the document.
@trovster: Absolutely a great extension, I wrote a bit about it in an earlier article as indicated above, but I’m glad you point it out here as it’s another great tool to have.
P.S. Glad to see you’re still reading 🙂
Interesting timing: just came across a link to a Firebug screencast that some may find interesting.
I am recently in love with Firebug. It’s about time a quality text editor was built into the very browsers for which we’re trying to write. I’m also loving the fact that I can mouse over elements on the browser to quickly highlight it in the code and vice versa.
Much like everyone else, I have recently fallen in love with Firebug as well. It’s good to see it get the credit it deserves.
ColorZilla https://addons.mozilla.org/firefox/271/
and MeasureIt https://addons.mozilla.org/firefox/539/
are both very handy aswell.
Oh, and who can forget CSSViewer? https://addons.mozilla.org/firefox/2104/
That’s probably the extensionI use the most.
Did my own round-up a few days ago ( http://mattwilcox.net/archive/entry/id/790/ ) from which I would also add:
View Rendered Source Chart
FireFTP
Aardvark is a great extension for Firefox. You can outline block level elements one at a time, view their source and even remove them from the page.
That is, if the fine folks over at Karmatics ever updatd it for FF 2.
I’ve been using the following Firefox extensions and can’t imagine web development without them anymore:
Web Developer
EditCSS
ColorZilla
IE View
and a cheezy one:
CuteMenus 🙂
@Justin: Yes, the highlighting feature is very useful. I’m not sure if I’d be able to use Firebug as an actual editor as it doesn’t behave much like one.
@Michael Chase: Definitely — the extension itself has come so far with this latest release. The future looks really bright for Firebug.
@Fredrik Wärnsberg: ColorZilla is absolutely great from time to time. Unfortunately, Linux support has been a bit wacky for me so I haven’t been able to use it all that much as of late. MeasureIt is also an extension I find myself using often to get a rough estimate for dimensions. CSSViewer is nice as well, the Web Developer Extension can provide you with even more detailed results (CSS – View Style Information), but requires a click after hovering your target element.
@Matt Wilcox: View Rendered Source is nice in that it will give a very visual representation of the markup which can come in handy. If you’d like to avoid having yet another extension installed, the Web Developer Extension can also provide this feature. I’ve spent some time with FireFTP and honestly had no problems, I just couldn’t get used to having my FTP client open in a tab of my browser, so I’ve stuck with a regular client.
@Mrad: Yes, I used Aardvark for a short time a while back, but Firebug does something very similar to that feature, and so much more (not to mention it works with Firefox 2).
@Ani: Thanks for your list 🙂
[…] Monday by Noon: The Best Browser Extensions for Web Development […]
[…] I can’t stress enough how important it is to keep tabs on yourself by properly testing your site in various environments. Cross platform, cross browser, and also just as important: cross technology. Many times, developers feel that if their code is valid, they’re good to go. Validity is very important, yes, but if a document doesn’t have semantic value, the validity is just a W3C badge you can include. A great way to visualize the semantics of a document is to disable the style of the document and see it naked. Another method I use on any site I develop is to give it a once-over using a text based browser. Very often will it put a spotlight on a section of the site that doesn’t have semantic markup and needs some attention. […]