Practical Ext JS Debugging

by Shea Frederick on Jan 20, 2010

10,992 views

An overview of my tactics for debugging Ext JS web applications along with some specific examples of problems I run into often, ...

More…

An overview of my tactics for debugging Ext JS web applications along with some specific examples of problems I run into often,

Presented at the first Three Pillar Global meeting in Fairfax, VA, on January 19, 2010.

http://www.meetup.com/baltimore-dc-javascript-users/calendar/12219819/

Less

3 Embeds 134

http://www.slideshare.net	132
http://www.lmodules.com	1
http://webcache.googleusercontent.com	1

Statistics

Favorites: 3
Downloads: 102
Comments: 0
Embed Views: 134
Views on SlideShare: 10,858
Total Views: 10,992

Practical Ext JS Debugging — Presentation Transcript

Practical Ext JS Debugging "how to waste less time"

About Me

Ext JS Core Contributor

Ext JS Consultant

Author of Learning Ext JS Book

Write for JavaScript Magazine

Blog about JavaScript

Provide training on the Ext JS library

http://www.vinylfox.com

http://www.learningextjs.com

Ground Rule

Use the debug version of Ext JS when developing.

Without '-debug' version

v is undefined

Ext.DomHelper=function(){var s=null,j=/^...dblclick",this.onNodeDblClick,this)}});

ext-all.js (line 7)

With '-debug' version

oe is undefined

me.addListener(e, oe..., oe.scope || o.scope, oe.fn ? oe : o);

ext-all-debug.js (line 2065)

Ground Rule

Code must pass the JSLint test.

myFunction = function(){ alert(myVariable) }

myVariable = 'boo'

if (myVariable == 'boo')

myVariable = 'blah'

myFunction()

var myFunction = function(){ alert(myVariable); } var myVariable = 'boo'; if (myVariable === 'boo'){ myVariable = 'blah'; } myFunction();

Ground Rules Covered

Now we can start to debug!

Four

Have you seen my finger?

Debugging Categories

1 ) Stupidity

2 ) Spleling

3 ) Timing

4 ) Scope

Category 1 : Stupidity Ease The Stupidity

Have we included the file?

Is the path correct?

Is it even the correct file?

Is the code ever being executed?

Is it the code were expecting to be executed?

Files? What Files?

Category 2 : Spleling Me Fail English, Thats Unpossible!

Case sensetivity.

Actual name, vs common name.

Fat fingers

new Ext.form.Formpanel({});

new Ext.Panel({

items: [{

xtype: 'formpanel',

items: [{

xtype: 'combobox'

}]

}]

});

new Ext.TreePanel({});

"is not a constructor"

Category 3 : Timing

Reading from a data store

Writing to a components elements

Responding to an event listener

"is undefined"

var win = new Ext.Window({ title: 'test', width: 200, height: 200 }); win.body.update('hello'); win.show();

No Records

var myStore = new Ext.data.Store({

});

mystore.load();

myStore.getCount();

Category 4 : Scope

Event Listners

Callbacks

Each loops

"doSomething is not a function"

Ext.each(myArry, function(r){

this.doSomething(r);

});

Ext.each(myArry, function(r){

this.doSomething(r);

}, this);

Events & Callbacks

myCmp.on('myevent', this.myHandler, this);

listeners: { myevent: { fn: this.myHandler, scope: this } }

Look to see that we haven't been stupid ,

if everything is spleled correctly,

loading in an appropriately timed order

and scoped properly.

Final Thought: Dirty Words...

"its not working"

Shea Frederick

http://www.vinylfox.com

Practical Ext JS Debugging

by Shea Frederick on Jan 20, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 134

Statistics

Practical Ext JS Debugging — Presentation Transcript