There’s got to be a million different strategies to approaching a JavaScript project. And since I’m always interested in trying to improve the resources and techniques I use to work on our projects, it seems appropriate to share my JavaScript development environment in case anyone might have suggestions for improvement.
Resources
QuirksMode - Pretty much goes without saying. Consider it my web based JavaScript headquarters.
JavaScript - The Definitive Guide - What QuirksMode does for the web, this book does for print. It is guaranteed to be on my desk throughout every project.
Koders - Often I remember the name of a function, but I don’t remember exactly how to use it or how many parameters it takes. Install the Koder plugin for Firefox, type in the function name, and within seconds you have an example at your fingertips.
Development Environments
Notepad++ - I have never found an advanced JavaScript environment, so this lightweight app fits the bill perfectly. Color coding, tabs, and easy to use are my current requirements, and Notepad++ handles that just fine.
Visual Web Developer - If I am working on a full web based project that revolves around ASP or .NET, then you may catch me with this open. It is nice to have all related files (HTML / CSS / JavaScript / ASP) in the same program.
PHP Designer 2005 - Just as I use Visual Web Developer for ASP projects, I use Designer 2005 for PHP projects. It handles all of your basic JavaScript needs.
Debuggers
The Basics - I used to hate ‘alert(“hello”)’ but now we have become friends. These techniques help you get by when you don’t have any other tools handy.
Venkman - Install the plugin for Firefox, and then go learn how to use it. The DOM Inspector is also worth taking a look at.
MS Script Editor - I am in the process of trying this out, and am looking for some feedback. It seems like it may be a potential option.
Nice collection of resources. I have also found Dynamic HTML: The Definitive Reference to be unbelievably helpful.
Speaking of links… do you guys mind sharing your del.iciou.us bookmarks?
I’ll show you mine if you show me yours: http://del.icio.us/bulius
Another good Javascript reference is http://www.DevGuru.com. They provide a list of all elements of the language including the events, functions, methods, objects, operators, properties, statements, and values along with examples of them.
Javascript Reference: http://www.devguru.com/technologies/javascript/home.asp They also have references for ADO, ASP, CSS, HTML, WML, and XHTML to name a few.
Javascript DOM Level 2 API - http://tech.citypost.ca/web-reference/dom2ref.php
The DevGuru link is for DOM Level 1. 2 is where is get’s interesting (Javascript at that point is essentially an XML manipulation language).
Also here are some bookmarks for catching Javascript Memory leaks (VERY useful when you start doing AJAXy type things):
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp http://jgwebber.blogspot.com/2005/05/drip-ie-leak-detector.html
Oh yea, one more for the “programmer in you”: Closures: http://jibbering.com/faq/faq_notes/closures.html
Julius - our del.icio.us accounts are all messed up right now. We bookmark Particletree articles, so that we can keep track of what people like to read. I’m in the process of separating my personal links from my Particletree links. You can view my profile at del.icio.us/rcampbell for what it’s worth.
My JS debugging usually involves the WebDevToolbar Javascript console, the DOM Inspector, and liberal amounts of alert()ing.
Something I’ve been thinking about recently (after seeing what Shaun Inman does with his debugger class in his site script library) is creating a more comprehensive error function - Shaun’s creates a floating div on the page with all the relevant variables/values listed; much more helpful than a series of alerts.
And, my links are broken to devguru. They picked a good day :)
http://www.devguru.com/technologies/javascript/index.asp
myEclipse: http://myeclipseide.com/ js shell: http://www.squarefree.com/shell/
The “MS Script Editor” is excellent in debugging for IE. For firefox, there is the Venkman debugger. Note that, the “debugger” keyword works both in the “MS Script Editor” and Venkman’s JS debugger.
You can also configure the MS Script Editor to open firefox for debugging.
The most useful tools in debuggers are break points, interactive js, call stack, and local variables.
Using “alert(…)” just doesn’t cut it for anything other than a small script.
If I may (to borrow a phrase from Ethan) pimp my own kool aid, I’ve just written a book that I hope will be a useful resource.
Here’s the website of the book of the t-shirt: http://domscripting.com/
Editing: EditPlus. Very complete (though not free, cheap). Don’t miss: user tools. It allows me to run all flavors of HTMLTidy to pretty print or validate, or commit/update to svn faster than you can say “I didn’t break it”
JavaScript Bible: Especially good with those obscure-hard-to-google issues that you don’t even know you’ll need. I usually read the portion regarding what I’m trying to do before wasting time making mistakes I could’ve avoided in the first place.
MS debugger for IE, Venkman for FF. Both indispensable. With complex enough code, there is NO way you can work with alerts. I can’t even start to emphasize how important the debuggers are: extremely powerful too! If I just want to track a value, I use a simple tool on my server: I just send the message to my server using XMLHttpRequest to print on my console. I can log as fatal, error, warn, info and debug, though I have only used debug and error anyways.
DevGuru for quick JS reference. It was slightly more useful when it indicated browser discrepancies, but the flipside is that it was a bit outdated. Now you just have to figure it out another way.
Other supahcool goodies: *View rendered source plugin (IE) (http://billfriedrich.tripod.com/downloads/ViewRenderedSourceIE.zip) *AIS Accessibility Toolbar (IE) (http://www.nils.org.au/ais/web/resources/toolbar/index.html) * MS dev tools: view partial source, DOM tree.(IE)(http://www.microsoft.com/windows/ie/previous/webaccess/webdevaccess.mspx) * FirefoxView (IE) (https://addons.update.mozilla.org/extensions/moreinfo.php?id=223)
A nice greasemonkey userscript for Javascript debugging.
http://www.digitalmediaminute.com/article/1622/javascript-trace-window