Debugging Sencha Touch Applications

Evan Trimboli & Tommy Maintz

AgendaCommon Javascript Oversights

Investigating the ToolsTouch Debugging Specifics

Common Javascript Oversights

No CompilerCase sensitivity mattersCheck spellingDeclare variablesReserved words

Truthiness & EqualityNo need for explicit true valueType coercion not performed by ===null/undefined are di!erent!

Closures

Variable Binding

Variable Binding

Language FeaturesNo block level scopePrototypal inheritanceHigher order functions

Investigating The Tools

Chrome Debugger

Elements Screen

Elements TabView current DOM stateSearchingView/Modify styles dynamically

Scripts Screen

Scripts TabBreakpoints, step line by lineCall stackInspect locals

Resources Screen

Resources TabLoading time/sizeLoad informationFiltering

ConsoleInteractive commandslog()/warn()/error()Counting/Grouping

JSLint

JSLint - Code Quality ToolGlobal variablesTrailing commasUnreachable codeRequired blocksMuch more

RemoteJS

RemoteJS - Android

Touch Debugging Specifics

Data

Loading DataIs the URL correct?Did the request complete?Was the data valid?Does the Model match the Component?

Event Driven ModelAjax - ASYNCHRONOUSExecution doesn’t stopMust use appropriate callbacks

Layouts

Over-nestingPanels with no layoutImplicit layouts (Carousel, TabPanel)

Dynamic LayoutsRemember doLayout & doComponentLayoutApply sizes to Components

Events & Scoping

What is “this”Contextual Information

HandlersCallbacksBlocks (Ext.each)

Are You ListeningCapture - All events on an instanceObserve - Specific events on all instances

General Tips

Use the Right Filessencha-touch.js - Minified, compressedsencha-touch-debug.js - Whitespace, comments

Getting Further HelpRead the documentation (then read it again)Consult the sourceWrite a test caseKnow how to ask for help

Happy Debugging!