Date post: | 12-Jan-2015 |
Category: |
Technology |
Upload: | sencha |
View: | 8,048 times |
Download: | 0 times |
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!