Efficient JavaScript
Development
tools, strategies, tips and tricks
Wolfram Kriesing, uxebu
wolfram@uxebu.com

1. Writing Code
2. Running Code
3. Debugging Code
4. Fixing Code

Writing Code
• coding style, conventions, etc.
• editors
• customize your editor
• templates
• code analyzer
• try it first

Coding Style, etc.
• less to think
• all code looks the same
• code not style
• stay focused

Useful Editors
What is „useful“?
faster writing of code, auto completion, code analyzer, syntax check
and coloring, dive in
• komodo
• aptana
• eclipse
• many others ...

Customize your editor
• keyboard shortcuts
• folding, bookmarking
• make your editor do what you want!

Templates
• no typos
• for the whole team
• docs built in
• copy with pride
http://www.activestate.com/Products/komodo_ide/edit_features.mhtml

Code analyzer
• syntax coloring
• knows the API of your library
• understands your code
• links code (dive in)
• auto completion
• JSLint built in

JSLint
• finds IE traps (trailing comma)
• gives JS insight (parseInt, ===, ...)
• understand type coercion
• finds missing var statements
• undefined variables (myVar vs. myvar)
http://jslint.com
http://wolfram.kriesing.de/blog/index.php/2007/understanding-jslint-output
http://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/

Try it first
dojo.query(\"h1\").style({color:\"red\"}).anim({left:300}, 500)

Try it first
dojo.query(\"h1\").style({color:\"red\"}).anim({left:300}, 500)
Are you sure this works?

Try it first
dojo.query(\"h1\").style({color:\"red\"}).anim({left:300}, 500)
Are you sure this works?
• try the code in FireBug first
• you learn more about your library
• play with the code
• maybe there is even a better way

Running Code
• loading times, order, etc.
• environments
• ajax requests
• inspect and fix

Loading the Code
• syntax errors
• any 404s
• need a build

Watch the traffic
• Charles
• HTTP Live Headers
• Fiddler
• etc.

Environments
• browsers
• phones
• air
• widgets

AJAX Requests
• FireBug reveals it all
• watch out with XD requests
•

Inspect and Fix
• fix the DOM
• fix the CSS
• see inheritance chains
• validate before trying

Debugging Code
• debuggers
• object inspection
• other sources
• isolating the problem

Debuggers
• IE8, developer tool bar
• FireBug
• Drosera
• Venkman
• Microsoft Script Debugger
• Visual Studio Express
• pi.debugger, FireBug Lite, ....
http://www.nczonline.net/blog/2008/03/22/falling-in-love-with-the-ie8-javascript-debugger/

debugger;
• programatic breakpoint
• set on the fly

Object inspection
• console.log
• console.dir

Other Sources
• google your problem
• talk to a colleague
• sleep over it
•

Fixing Code
• trial and error
• alert, console.log, etc.
• in browser
• tuning

Trial and Error
• you know your code
• you think you know it
• you imagine you knew it
• you think you should try
• you fail

alert, console.log
• alert, confirm
• use numbered console.log
•

*.toString()
• see the source
• missing function name (you know it)
• parameters
• fix it in place!

Tuning
• console.time
• console.timeEnd
• console.trace

thx
http://blog.uxebu.com
Wolfram Kriesing, uxebu
wolfram@uxebu.com