The Ultimate Front End Dev Environment

I feel I haven’t poked the subject of the front end development process to the point that it would scream from a “poking pain” feeling. And I’m looking at a recent Coding Horror post on the same subject as the reason why I’m putting my two cents in now. I’ve gone through great lengths on a defense of Dreamweaver, as bad as some people believe it to be, but I haven’t actually talked about the other side of the equation when it comes to developing on browser technologies, the browser development environment itself.

Since I started working on websites, browsers were never really great development environments. There were times I wondered if Microsoft or some third party had developed an application, using the IE rendering engine, that would have all the necessary tools needed for debugging html, css and javascript. It’s probably this reason why it took me so long to start using CSS and Javascript on a daily basis partly because debugging through color overlays (try imitiating Firebug’s colors overlay with css selectors and properties) and alert calls is very time consuming. And if you need to change just one character, that change still needs to be done in the editor before it can be previewed in the browser.

Sure, IE has had some javascript debugging, but I’ve never been able to follow it. It dumps me to a Visual Studio for Macros that shows the current line that is being problematic, but never really lets you see anything of importance - like what the current state of any variable.

Then came Firefox, which begat the Webdevelopers Toolbar and Firebug. Ever since Firebug’s 2 release I have been gifted with the one thing I really feel all web browsers should come with: console.debug(). As bad as trace commands can be in Actionscript (do remember that your final published should remove all trace calls), they are an invaluable tool in an actionscripters aresnal when it comes to debugging. And while developing in these two environments can be extremely different, it is at times very similar. Both languages are based on ECMA Script.

Needless to say, these two extensions, have made Firefox an excellent developing environment for web. That is not to say that it is a replacement for other applications that have been used in development. I still use Dreamweaver very heavily - not only am I accustomed to it’s UI, but it has the control and customizing I need with a pretty decent file/ftp/testing facility. I use Firefox more to make minor changes and run through debug activities. It allows me to be focused in those tasks. But when I’m ready to make my final changes, I’ll go back to Dreamweaver and put in my final changes.

In addition to Firebug and Web Developer, some other useful extensions are:

April 11, 2007 10:52 PM Development


Leave a comment of your own

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.

Use of HTML for comments is not available.

In an effort to combat spam, you will be able to post your comment after you preview.

Powered by Movable Type 3.2 Creative Commons License: Some Rights Reserved © 2000-2005

Site feeds. Hofully valid XHTML and CSS. No kitties were harmed in the making of this website.