Debugging Dojo Applications (2/10/2010)

Debugging Dojo Applicationsdojo.connect

February 10, 2010

Chris BarberCB1, INC.

http://www.cb1inc.com/

dojo.connect | 2.10.2010 | Chris Barber | CB1, INC. | http://www.cb1inc.com/

About Me

● Chris Barber

● Open source hacker

● Software consultant

● JavaScript, C++, PHP

● Dojo committer

● http://www.cb1inc.com/

● http://twitter.com/cb1kenobi

● http://slideshare.net/cb1kenobi

All Software Has Bugs

Fixing Bugs Sucks

Things You Could Be DoingInstead of Fixing Bugs

● Sleeping

● Reading a book

● Working out

● Enjoying a frosty brew

● Mowing the lawn

● Watching a movie

● Bowling

● Doing laundry

● Attending this presentation!

● Playing Bioshock 2

● Shopping for new shoes

● Getting your picture taken at those little booths at the mall

● Shoveling snow● Actually, this is worse

that fixing bugs

● Selling junk on eBay

● Buying junk on eBay

Debugging Dojo& JavaScript

Types of Bugs

● Syntax errors

● Runtime errors

● Logic errors

● Performance issues

● Bugs that other people committed into svn● Because our code is flawless

Old School Debugging

<form>

</form>

alert("If you're reading this, it doesn't work.");

document.write("x should be 10, but for some reason it's " + x);

document.forms[0].output.value += "Loading external resource...\n";

document.forms[0].output.value += "Still loading...\n";

document.forms[0].output.value += "Hello?\n";

</script>

● Write some code, reload, test, write some code, reload test, write some code, reload, test

● But if you write too much code● Comment out / remove huge chunks of code until

things work again

● View source● What exactly did the server send?

var quote_of_the_day = "Who said "debugging" ain't easy?";

● Custom error handling awesomeness

window.onerror = function(msg, url, lineno){ alert("Thou art detects an error:\n" + "Message: " + msg + "\n" + "URL: " + url + "\n" + "Line #: " + lineno);};

function foo(){ var bar = "fail";

● JavaScript console● Netscape 4, Mozilla, Firefox

● Internet Explorer● Generally sucked● Line # rarely correct● Crappy error messages

– "Object required"

● Microsoft Script Debugger● Steaming pile

● Microsoft Script Editor

● Uses Visual Studio

● It's on your Office 2003 CDs

● Venkman● Component of the Mozilla Suite● Also a Firefox extension● Sloooooooooooow

– Provided it didn't crash

Not So Old School

● try/catch/throw● New in ECMAScript 3!

– Published Dec 1999

● Implemented by IE6/NS6try { if (something) { throw new Error("oh snap!"); }} catch (e) { alert(e);}

● Catches that suppressed errors● All over Dojo code base● If something is not working, check if it's being silently

being caught

Advanced Tactics

● Proxy server

● Packet sniffing

JavaScript Bugs

● Syntax errors● Things that the cause the parser to hate life

function foo() {

foo(1 2);

dojo..isFunction(foo);

JavaScript Bugs

● Runtime Bugs● Undefined variables & methods● Unexpected results

foo(); // foo() undefined

var i = 10 + x; // x undefined

function bar() { return arguments.join(',');}

function baz(y) { return y * y;}

alert(baz(2)); // undefined!

JavaScript Bugs

● Variable scopes● Local vs global

● Naming● Case sentivity● Try to use unique

names to avoid accidentally overwriting

● Use meaningful names– Unless you need a little

more job security

● Watch out for reserved words!● Rhino (used by Dojo's

build tool) is very picky

break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with

abstract, boolean, byte, char, class, const, debugger, double, enum, export, extends, final, float, goto, implements, import, int, interface, long, native, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile

JavaScript Bugs

● Functions● Forgetting commas between arguments● Forgetting braces● Misspelling funtcion● Avoid resuing function names

function foo(){ alert("hello");}foo(); // alerts "world"

function foo(){ alert("world");}foo(); // alerts "world"

JSON Bugs

● Missing commas

● Hanging commas

● Confusing } and ]

● Not quoting names that contain special chars

var i = { firstName: "Chris" lastName: "Barber"};

var j = { firstName: "Chris", lastName: "Barber",};

var k = [ { "class": "JavaScript", "course #": 101 }, { "class": "C++", "course #": 102 };

JavaScript Engine Limits

● Max string length● Implementation dependent

● Max integer value● Really, really huge

● Max z-index● 2,147,483,647

● ...

djConfig.isDebug

● Only useful in browsers that don't have a console● IE6/7● Firefox without Firebug● Old versions of Opera/Safari

djConfig.isDebug

● Automatically loads dojo._firebug.firebug

● Limited functionality● ReCSS, console, DOM viewer, Object viewer

dojo.declare

● Used to define objects

● Careful what you initialize● Numbers, booleans, & strings are OK● Arrays & objects are a bad idea

– Use constructor() or postCreate() (if a dijit)dojo.declare("MyObj", null, { foo: [ "Hello" ], bar: null, constructor: function() { this.bar = ["baz"]; }});

var obj1 = new MyObj;var obj2 = new MyObj;

console.debug(obj1.foo); // outputs ["Hello"]console.debug(obj2.foo); // outputs ["Hello"]obj1.foo.push("world!");console.debug(obj1.foo); // outputs ["Hello","world!"]console.debug(obj2.foo); // outputs ["Hello","world!"]

obj1.bar.push("zap");console.debug(obj1.bar); // outputs ["baz","zap"]console.debug(obj2.bar); // outputs ["baz"]

dojo.declare

● Extending objects● Invoking an inherited object's method

dojo.declare("MyObj", nullj, {

foo: function(){ alert("Hi from MyObj!"); }

dojo.declare("MyNewObj", MyObj, {

foo: function(){ alert("Hi from MyNewObj"); this.inherited(arguments); }

dojo.data

● fetchItemByIdentity()● Make sure IDs are unique!

dojo.require("dojo.data.ItemFileReadStore");

var s = new dojo.data.ItemFileReadStore({ data: { identifier: "id", items: [ { id: "/foo", name: "foo", children: [ { id: "/foo/bar", name: "bar" } ] } ] } });

s.fetchItemByIdentity({ identity: "/foo", onItem: function(item){ console.info(item); }, onError: function(item){ console.error(item); }});

Manipulating the DOM

● Wait until onload● dojo.addOnLoad() or dojo.ready() (new in 1.4)

● If you can't wait, use document.write()

dojo.parser

● djConfig.parseOnLoad does not autoload dojo.parser

● Must dojo.require("dojo.parser")

● Can fire the parser manually● dojo.parser.parse()

dojo.require()

● Build system is a little too smart● Uses regex to find requires

if(condition){ dojo.require("my.module");}

if(condition){ dojo["require"]("my.module");}

dojo.requireIf("my.module", condition);

Closures & dojo.hitch()

// assume we're in an object's function...

dojo.forEach([1, 2, 3], this.foo); // Error!

var _t = this;dojo.forEach([1, 2, 3], function(n){ _t.foo(n) });

dojo.forEach([1, 2, 3], dojo.hitch(this, "foo"));

// does the same thing internally as dojo.hitch()dojo.forEach([1, 2, 3], "foo", this);

// dojo.connect does the same thingdojo.connect(myButton, "onclick", this, "foo");

file:/// issues

● Firefox 3 security causes issues● about:config

● security.fileuri.strict_origin_policy = false– http://kb.mozillazine.org/Security.fileuri.strict_origin_policy

dojo.deferred

● Use errbacks

● dojo.xhr() returns a deferredfunction getData(i, n){ return dojo.xhrPost({ url: "/fetchData.php", postData: { id: i, name: n }, handleAs: "json" });}

var deferred = getData(123, "foo");deferred.addCallback(function(data){ console.log("Whoo!");});deferred.addErrback(function(error){ console.error("Oh noes!"); console.error(error);});

Widget Params

● Param must be defined before mixin

Template Errors

● 404 File not found

● No root node

● Invalid variables ${foo}● Variables must be defined before buildRendering()

– member variable

– initialize in constructor()

– initialize in postMixInProperties()

Template Errors

● Say you want to speed up development

● Do a Dojo build of dojo, dijit, code that is good to go

● Your namespace is "foo" and you have a custom dialog that extends dijit.Dialog

● If using Dojo 1.3.2 or earlier, you MUST define templateString:null before your templatePath● Otherwise the dijit.Dialog's templateString overrides

your templatePath!

dojo.declare("foo.MyDialog", dijit.Dialog, { templateString: null, templatePath: dojo.moduleUrl("foo", "MyDialog.html")});

Template Errors

● Not an issue with 1.4 and newer

● Just use templateString

● Use dojo.cache!● You can still use dojo.moduleUrl()

dojo.declare("foo.MyDialog", dijit.Dialog, { templateString: dojo.cache("foo", "MyDialog.html")});

// After build, template is inlined! Awesomedojo.declare("foo.MyDialog", dijit.Dialog, { templateString: dojo.cache("foo", "MyDialog.html", "<div>Hi from my dialog!</div>")});

Template Errors

● Build system uses regex to inline templates

● Don't get cute

(function($){

$.declare("foo.MyDialog", dijit.Dialog, { templateString: $.cache("foo", "MyDialog.html") // NO! });

})(dojo);

(function($){

$.declare("foo.MyDialog", dijit.Dialog, { templateString: dojo.cache("foo", "MyDialog.html") // OK! });

})(dojo);

Templates Caching Issues

● When not using a build, templates are loaded via XHR

● Templates may be cached by the browser● Definitely in Firefox

● Disable cache or empty cache after template changes

postCreate() vs startup()

● postCreate()● Template created● Can create new DOM nodes● Not every widget's postCreate() has been called yet!

● startup()● Called after a widget and its children have been created

and added to the page● All parent/child widgets created, postCreate() has been

called● Now you can start talking to other widgets :)

Dijit Themes

● Live coding mistake #253● Forgetting to include the dijit theme's css file

Dijit Themes

● Live coding mistake #254● Forgetting to add the theme name to the body class

</body>

Dijit Themes

● Only use what you need!

● Example: you only need a dijit.Calendar// mytundra.css

@import url("/path/to/dijit/themes/dijit.css");@import url("/path/to/dijit/themes/tundra/Common.css");@import url("/path/to/dijit/themes/tundra/form/Common.css");@import url("/path/to/dijit/themes/tundra/Calendar.css");

● Build system inlines only those files!<link rel="stylesheet" href="/path/to/mybuild/mytundra.css" type="text/css"/>

The Build System

Build Profiles

● Define the prefixes you need● Build system copies each namespace● Don't need to specify "dojo" prefix

dependencies = {stripConsole: "normal",version: "1.4.1",cssOptimize: "comments",copyTests: false,optimize: "shrinksafe.keepLines",layerOptimize: "shrinksafe.keepLines",

layers: [{

name: "dojo.js",dependencies: [

"dijit.Dialog","dijit.layout.BorderContainer","dijit.layout.ContentPane"

prefixes: [[ "dijit", "../dijit" ]

ShrinkSafe

● optimize & layerOptimize● shrinksafe

– Awesome for production!

● shrinksafe.keepLines– Awesome for debugging!

● dojo.js & dojo.js.uncompressed.js● Use the uncompressed version for debugging

Other Tricks!

dojox.analytics

● Use it to send info back to the server● Dojo startup info● Window information● mouseover sampling● idle activity● console.* messages

CSS Tricks

● Disable a style/property by changing the name to something invalid● x.myStyle{padding:10px;}

● Styling dojo.dnd.Avatars● Start a drag, then disable JavaScript● Use Firebug/ReCSS to finish styling

● Empty cache or disable cache to refresh background images

Missing Images

● Create images and be notified if the image is 404

● dojox.image.Lightbox uses this technique

dojo.create("img", { id: "myimage", src: "/path/to/my/image.jpg", onerror: function(){ dojo.create("img", { id: "missingimage", src: "/path/to/missing/image.jpg" }, dojo.body()); }}, dojo.body());

// note: this code is untested... don't shoot me// if it doesn't work :)

Performance

If it's slow, it's a bug

Performance

● Use a Dojo build

● Only include the dijit css files you need

● Cache values that won't change● getViewport(), marginBox(), etc

● Destroy non-visible tab content

● Combine XHR payloads

● Use a profiler

● Write better code

Performance

● Combine images into sprites● Additional sprite for repeat-x & repeat-y

● Enable gzip

● Use a CDN● Or multiple subdomains

● Put scripts at the bottom of the page

● Read Steve Souder's books!

● http://stevesouders.com/

Testing

Test Cases

● Write simple test cases● Individual html files to test a specific feature

● DOH: Dojo Objective Harness● Little chunks of code to test stuff

dojo.require("doh.runner");

dojo.addOnLoad(function(){ doh.register("myTest", [ function myFunction(){ var foo = []; foo.push(6); foo.push(1); foo.push(2); doh.is(foo.indexOf(1), 2); } ]); doh.run();});

Testing Multiple Browsers

● Use a bunch of old computers

● Or join the modern web development revolution and use a virtual machine● Virtual Box● VMware Workstation● VMware Fusion● Parallels● IE6/IE7/IE8● FF2/FF3● Safari 3/4● Opera 9/10

Testing Multiple Browsers

● Microsoft Virtual PC Disk Images

● http://tinyurl.com/osoomm

Disk Image Expires Size

IE6 + XP SP3 April 1, 2010 753.8MB

IE7 + XP SP3 April 1, 2010 813.1MB

IE8 + XP SP3 April 1, 2010 812.9MB

IE7 + Vista 120 days after first run 700.0MB, 700.0MB, 590.5MB

IE8 + Vista 120 days after first run 50.6MB, 700.0MB, 700.0MB, 687.9MB

Firefox Extensions

● Lori – Life-of-request info (page load times)

● Tamper Data● Dated, but can still be useful

● Web Developer Toolbar

● Firebug

● Firecookie

● Yslow

● Many, many, many, many more...

Firebug

● http://www.getfirebug.com/

● console.log(), console.debug(), console.info(), console.warn(), console.error()● Use "," instead of "+": console.debug("x =", x);

● Console

● Debugger

● Profiler

● more...

Firebug Lite

● http://getfirebug.com/firebuglite

● Bookmarklet

● More featureful than Dojo's FBL

Webkit Web Inspector

● Chrome/Safari/Epiphany/Titanium

● Enable in Safari from command line:– defaults write com.apple.Safari IncludeDebugMenu 1

● Console

● Debugger

● Profiler

● more...

IE Developer Toolbar

● IE6/IE7

● DOM viewer

● Modify CSS

● Clear cache

Internet Explorer 8

● Integrated into IE8!

● Console

● Debugger

IDEs With JavaScript Debuggers

● Netbeans● http://netbeans.org/kb/67/web/js-debugger-ug.html

● Firefox & IE

● Aptana Studio● http://www.aptana.org/studio

● Eclipse + Fireclipse● http://www.almaden.ibm.com/u/bartonjj/fireclipse

● Still active?

● Dojo Extensions for Adobe AIR

● http://o.sitepen.com/labs/dair/

● Debug console

● Command line logger

● File logger

Resources

Getting Help

● API Docs

● http://api.dojotoolkit.org/

● http://docs.dojocampus.org/

● IRC● #dojo on irc.freenode.net

● dojo-interest Mailing List● http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

● Dojo's source code

Getting Help

CB1, INC

http://www.cb1inc.com/

Dojo ConsultingWeb Applications

Thanks!

Questions?

http://slideshare.net/cb1kenobi http://twitter.com/cb1kenobi

Debugging Dojo Applications (2/10/2010)

Technology

Transcript of Debugging Dojo Applications (2/10/2010)

AJAX Tutorial 06 Debugging MS Ajax Applications Cs

Performance Debugging Techniques For HPC Applications

Utilizing Debugging Information of Applications in Memory ...

Debugging Mobile Web Applications with - O'Reilly Mediaassets.en.oreilly.com/1/event/74/Lightning Demos Tuesday... · Debugging Mobile Web Applications with weinre for OSCON 2011

Monitoring and Debugging Dryad(LINQ) Applications with Daphne

App Builder Debugging Applications

Techniques for Debugging HPC Applications

DEVELOPMENT OF WEB BASED GIS APPLICATIONS ......Introduction to Dojo Dijit Dojox Dojo architecture Integrating Dojo with ArcGIS Server ArcGIS Server resources Initialization script

Visual Programming of MPI Applications: Debugging ... - ComSIS

Production Debugging for .NET Framework Applicationsread.pudn.com/downloads155/ebook/689673/DBG_download.pdf · 4 Production Debugging for .NET Framework Applications Debugging Tools

Debugging mobile web applications with weinre

Debugging Natural Applications

TotalView - Memory debugging in parallel and distributed applications

Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User

Utilizing the Dojo Toolkit for Web browser-driven applications from CICS

Debugging Oracle ADF Applications (OpenWorld 2009)

Debugging NET Applications With WinDBG

Debugging Linux Applications

Andrew Ferrier - 2011-03-23-WUG-Building Dojo Web Applications

Debugging of (C)Python applications