Web Development Tools for the Power Developer
September 10th, 2006[ See Revised List ]
Over the past few years the available tools for web development have become quite powerful. As Firefox became more popular the number of useful extensions grew quickly. And many of those extensions are targetted at web development. Improvements have not been limited to Firefox. Since the release of ASP.NET 2.0 and the renewed energy in the development of Internet Explorer there have been significant improvements to the Microsoft offerings.
And this all comes down to exposing the internals of the web browser to the web developer to essentially allow us to debug how the web page is being rendered. A couple of years ago when a designer set a rule in CSS and expected it to be applied to a specific element there was no way to confirm that it worked except for viewing it in the web browser. And sometimes a rule would work in one browser but not in another. To correct it the designer had to place blatantly obvious markers in the CSS rules, like a red background, and continue to guess at changes which may get the style to be applied to the web page.
The same has been true for Javascript. With Firefox you could use the console to view errors, but few people went beyond that. With Internet Explorer it was possible to start the Visual Studio debugger and walk the code step by step, but you had to have a licensed copy of Visual Studio to do so. Here is another area where things have changed for the better.
In September of 2005 everything changed. Chris Pederick released the Web Developer extension for Firefox. It went way beyond any other web development tool ever did before. It provided a toolbar with many options, such as Cookies, CSS, Forms, Images, Outline and others. You could access a great deal of information from the web browsers perspective and see how Firefox was interpreting the information you were providing to render the page. It instantly became the ultimate web development tool. (Also see Firebug)
In March of 2006 Microsoft responded by releasing the beta of the Internet Explorer Developer Toolbar which offered many of the same features that the Firefox extension provided. Given that a vast majority of website visitors are using Internet Explorer, this was a welcome release. It also provided features related to images, outlining, validation and others. Perhaps the most useful feature is the DOM Explorer which allows you to walk a tree view of the markup structure while the rendered window draws an outline around the currently selected element. And while it is selected you can view all of the information about the node, include the CSS class name and rules applied to that element. It is extremely powerful when working with a complex web page. You can even use the Select Element by Click feature which allows you to click on elements in the rendered window to jump right to that element in the tree view.
Both of these web browser addons provide many of the existing tools we already had like validators for HTML and CSS and more.
When it comes to Javascript, we did not pay much attention to it between 2001 and 2005. It was regarded as a lost cause, that is until AJAX took off in the early months of 2005. At that point debugging complex AJAX applications became necessary again. For Firefox you can use Venkman. This Javascript debugger has been a part of the Mozilla browser for years, but as various versions changed the extension API, Venkman had to play catch up. As of February of 2006, Venkman should be working for the current release of Firefox.
If you wanted to debug Javascript in Internet Explorer and did not have a licensed copy of Visual Studio you were out of luck. This past November that changed when Microsoft created Visual Web Developer and made it free to the community. You can now use that to debug Javascript. Between Venkman and Visual Studio, I have found the Visual Studio debugger is more stable. When working with complex Javascript, I now debug it in Internet Explorer and when I move to Firefox I just use the console to check for errors. That approach has served me well.
The tools listed here so far should cover most of your web development needs. The links below should help you fill in the remaining gap.
Validators
Javascript
Websites
- A List Apart
- Position Is Everything
- Quirks Mode
- WaSP
- CSS Zen Garden
- CSS Crib Sheet
- Yahoo! Browser Grade Chart
ASP.NET
- Atlas Toolkit
- Web Application Projects
- Web Deployment Projects
- CSS Control Adapters
- Web Development Helper
- Script#
- CSS Properties Window
- Scott Guthrie's Blog
- Nikhil Kothari's Blog
September 12th, 2006 at 5:45 am
September 2005? Feels like I've been using the Web Developer extension since forever.
September 12th, 2006 at 9:55 am
[...] Brennan Stehling has done a nice job in compiling Web Development Tools for the Power Developer: [...]
September 12th, 2006 at 9:58 am
You forgot to mention Site Inspector (formerly IE Booster) which does a lot of stuff, too!
See:
http://www.paessler.com/psi/history
September 12th, 2006 at 11:12 am
Forgot to mention the must have IDE: Aptana (www.aptana.com)
September 12th, 2006 at 1:19 pm
[...] Brennan's blog | ajaxian [...]
September 12th, 2006 at 3:02 pm
Excellent summary of current state of web development tools. Thanks Brennan.
September 12th, 2006 at 3:06 pm
Don't forget about Firebug. It has quickly become my favorite Firefox extension for developing Ajax-ified web apps. You can see the Ajax traffic between the client and server, browse the page DOM and JS events, and even add debugging messages into your Javascript that will display in Firebug so that you don't have to rely on those annoying alert messages.
September 12th, 2006 at 3:09 pm
I never used Firebug. The problem with Firefox extensions is that there are so many of them. At one point I had lots of them installed but they all contributed to slowing down Firefox and chewing up memory so I removed most of them. Firebug sounds very useful!
September 12th, 2006 at 3:48 pm
I have 25 working Firefox extensions and everything's running smoothly (love that firefox!)
I use Web Developer to change a site's appearance on the 'fly.' I guess I'd call it: Surfer assistant. One person's preference is another person's annoyance. Do you think that at some point, a wise programmer will realize that most people have preferences they want to set themselves and they want these preferences to override the css and design the web developer may use?
September 12th, 2006 at 5:00 pm
Some sites allow you to adjust the style of their pages. It is covered very well here...
http://www.alistapart.com/articles/bodyswitchers/
A new feature on CNN.com is the font resizer.
http://brennan.offwhite.net/blog/2006/09/02/change-the-font-size-to-help-your-readers/
I created a little widget to do that, but the one on CNN.com actually remembers your preference so the font size stays the same. A good alternative to the default style could be one with larger fonts and more contrast to make the text easier to read. And making it stick is a helpful feature.
September 12th, 2006 at 6:33 pm
[...] I was gonna keep this post short tonight so heres some quicklinks. Some Interesting Tools for the Power Developer. A shocking Flash Animation showing CO2 Emission. If you missed the Apple Conference then here is the run down from Engadget. What about some DS Icons?!?. Interesting Guide of how to get the most from Google Desktop because I wanted to install this the other day but didnt bother. Naughty Google they started the war between Coke vs Pepsi. Facebook to become new Myspace?!?. [...]
September 12th, 2006 at 9:44 pm
[...] 今天看过了Web Development Tools for the Power Developer这篇文章，留下文中的这些工具作为存档，方便所有Web开发人员。 Validators [...]
September 13th, 2006 at 2:38 am
Web development tools
Just found this very interesting article regarding web development tools,
September 13th, 2006 at 3:37 am
I couldn't live without Firebug these days, it just makes developing Javascript apps much easier.
Great summary by the way!
September 13th, 2006 at 4:35 am
[...] read more | digg story [...]
September 13th, 2006 at 8:56 am
You missed off some JavaScript software tools:
JavaScript Bug Validator (a flow tracer)
JavaScript Coverage Validator
JavaScript Performance Validator
JavaScript Memory Validator
all from the same company - Software Verification
http://www.softwareverify.com
September 13th, 2006 at 10:15 am
[...] MooTools ReleasedApocalypse 2.0 - A New Era of FragmentationHyperScope: From the past to the futureDojo’s Deferred APIJavaScript Persistent Object Notation (JSPON)Profiling and Optimising Ajax ApplicationsLightbox using iFrames instead of AJAXUnobtrusive Javascript and Ajax for RailsStop using the “beta” labelGoplan is on, invites are outWeb 2.0 and the necessity of failureWhy Ajax? [...]
September 13th, 2006 at 11:28 am
[...] read more | digg story [...]
September 13th, 2006 at 12:16 pm
[...] Web Development Tools for the Power Developer [...]
September 13th, 2006 at 12:52 pm
I am really suprised that no one has listed DebugBar for IE yet. I swear by it. I can't believe how much time it has saved me.
http://www.debugbar.com
September 13th, 2006 at 2:05 pm
You shouldn't forget The Web Developer's Handbook
September 13th, 2006 at 3:28 pm
[...] A great compiled lists by Brennan. Read more, here and here (The Web Developer’s Handbook). Improve ItThese icons link to social bookmarking sites where readers can share and discover new web pages. [...]
September 13th, 2006 at 4:07 pm
[...] Nice list of tools for web developers.read more | digg story [...]
September 14th, 2006 at 1:51 am
[...] I've found a nice post, with a list of must have Dev Tools. [...]
September 14th, 2006 at 2:33 am
[...] Web Development Tools for the Power Developer [...]
September 14th, 2006 at 5:43 am
[...] Brennan’s Blog » Blog Archive » Web Development Tools for the Power Developer Collection of Web development tools (tags: Web development) [...]
September 14th, 2006 at 9:09 am
[...] My 50 favorite design resources [...]
September 14th, 2006 at 11:50 am
Just in case you need more ASP.NET tools, check ou SharpToolbox.com: http://sharptoolbox.com/categories/asp-net
September 14th, 2006 at 11:35 pm
[...] Nice list of tools for web developers.read more | digg story [...]
September 15th, 2006 at 11:55 am
Web Developer extension for Firefox is great! but you can find a useful list of extensions for web developer here:
Extensions for Web Developers
September 15th, 2006 at 11:18 pm
did you forget the dojo
September 16th, 2006 at 5:30 am
Tool per lo sviluppo web
Web Development Tools[IMGRIGHT=/fahrenheit451/homes/blog/FirefoxExtensions.png]Over the past few years the available tools for web development have become quite powerful. As Firefox became more popula ...
September 16th, 2006 at 6:56 am
[...] Html & C. - I migliori tool per lo sviluppo web (Brennan Stehling) [via] [...]
September 16th, 2006 at 1:44 pm
nice, I will be adding them to http://www.developertoolz.com
there is a lot of other great tools by great developers at http://www.developertoolz.com
September 22nd, 2006 at 7:26 pm
[...] Vía Ajaxian se encuentra un listado de herramientas esenciales para los desarrolladores web, recogidas en el Blog de Brennan. [...]
September 26th, 2006 at 9:17 am
[...] [ Web Development Tools for the Power Developer ] [...]
September 26th, 2006 at 9:20 am
[...] [ Web Development Tools for the Power Developer ] [...]
September 26th, 2006 at 9:24 am
[...] [ Web Development Tools for the Power Developer ] [...]
September 26th, 2006 at 11:34 pm
[...] Brennan’s Blog: Web Development Tools for the Power Developer [...]
October 1st, 2006 at 8:53 am
[...] Brennan’s Blog » Blog Archive » Web Development Tools for the Power Developer (tags: web tools development utilities) [...]
October 3rd, 2006 at 3:15 pm
I have a position for a web developer working with ASP.NET and Microsoft Visual Web Developer. If anyone is interested call Andrew Freundt at 1-800-452-7391.
October 4th, 2006 at 6:03 am
[...] Nice list of tools for web developers.read more | digg story [...]
October 6th, 2006 at 3:28 am
[...] Html & C. - I migliori tool per lo sviluppo web (Brennan Stehling) [via] [...]
October 8th, 2006 at 11:35 am
[...] Many phases of web development need go no farther in software demands than their browser of choice. Brennan Stehling discussed the two browsers with the highest market share and their potential for web developers. [...]
October 9th, 2006 at 11:26 pm
[...] I-Hacked.com Taking Advantage Of Technology - Elevator Hacking ma.gnolia.com Reddit spurl Brennan’s Blog » Blog Archive » Web Development Tools for the Power Developer Design215 megapixels comparison and maximum print size chart [...]
October 12th, 2006 at 3:28 pm
Very good site. Thank you:-)
October 17th, 2006 at 3:46 pm
[...] Brennan’s Blog » Blog Archive » Web Development Tools for the Power Developer (tags: tools web webdev) [...]
December 8th, 2006 at 5:33 am
[...] vía Web Development Tools for the Power Developer. Escrito por manuel Guardado en Varios, Programacion [...]
April 2nd, 2007 at 9:54 pm
I have posted a revised list:
http://brennan.offwhite.net/blog/2007/04/02/web-development-tools-for-the-power-developer-revised/
April 30th, 2007 at 8:26 am
[...] Vía Ajaxian se encuentra un listado de herramientas esenciales para los desarrolladores web, recogidas en el Blog de Brennan. [...]
October 21st, 2007 at 10:23 am
[...] Brennan Stehling ha listado una serie de herramientas para el desarrollo web que todo buen desarrollador debe tener en cuenta: [...]
November 8th, 2007 at 6:16 am
Nice article, especially about debugging JS in IE.
I find FF to serve well for web development on client-side.
For normal browsing I use FasterFox (it really makes a difference).
The only think about FF is that sometimes it ends up eating too much RAM.
Best of luck