Modern browsers now provide a set of Developer Tools so that a web developer can use when viewing or making a web page. Currently, all browsers have these tools built in. With these you can inspect the DOM, see which css properties are applied in every element, and you can also edit and add new properties. This is very helpful because you can see the changes immediately in an actual browser, and not in the design mode of an IDE (Dreamweaver, Visual Web Developer, etc).
If you are a Firefox user, you have more tools available that can really boost your productivity. There are some excellent add-ons that you can use and practically you can write markup and css through Firefox. The add-ons I use are
- Web Developer
- Measure It
The first two are really powerful. Their combination provides functionality that I couldn’t find in any other browser. Let’s take every add-on and talk a bit about it…
With firebug you can inspect the elements of a web page and see the in what depth is is (1). You can see all the css properties each element has, in which css file this property is declared (2). You can also see if there are css properties that are overridden by other declarations (3).
Check the screenshot to see the (1), (2) and (3).
The most useful feature is that in (1) you can very easily add/edit/delete not only html attributes and css properties but you can write your own HTML. For example right-click in (1) and firebug gives you the HTML of the selected element in plain text form. There you can edit the HTML code in any way. You can easily add more <li> elements in a menu, add more <tr> in a table. You can also add <style> tags and write your css for your new HTML. You can add or edit csss properties in (3) and you can deactivate existing ones. And of course, every change is shown directly in the main window. I find this much better than writing HTML in a IDE and then check it in a browser. The only thing missing is intellisense. It is also a great way to make some draft changes without touching the actual code. Pretty cool I think.
Web Developer also allows you to edit the HTML and the css files. Editing HTML with this add-on is not very helpful, since you get the entire HTML code in plain text for you to edit. We can do it better with firebug. On the other hand, if you use firebug to edit HTML, you can use web developer to edit the css. You should know, that when you open the css from Web Developer, some changes in the css made with firebug might (and probably) get lost.
ColorZilla & MeasureIt
While you are editing your css, you probably need some extra info on colors and width. For this task you can use ColorZilla and MeasureIt. Colorzilla is a simple and great color picker tool. If you like the colors of some web page, you can easily get them with ColorZilla. MeasureIt comes handy since it can measure distances between points. When activated you can draw a rectangular and the tool tells you its dimensions in pixels. You can easily know in what dimensions to make a banner to put in a column of your site.
If you read this article until this point (and thank you very much for that) you might think that these features are not some killer features, but just some basic tools that do what they are supposed to do. No arguments here, but I find that if you put these together and use them, you will see that can write some good HTML and css fast. Personally I prefer using Firefox rather some IDE. Along with the browser war, Firefox comes a big winner because of these simple, yet powerful add-ons.
If you are interested in more add-ons for web design you can out this article: http://www.instantshift.com/2009/01/25/26-essential-firefox-add-ons-for-web-designers/.