debugging sencha touch apps

37

Upload: sencha

Post on 12-Jan-2015

8.048 views

Category:

Technology


0 download

DESCRIPTION

Debugging applications on mobile devices is challenging. Although simulators exist, tooling is limited. Luckily, with some accomodations, you can debug your mobile web applications using most desktop tools. In this session, we'll go over what works, what doesn't and how to use tools appropriately to debug your mobile web app.

TRANSCRIPT

Page 1: Debugging Sencha Touch Apps
Page 2: Debugging Sencha Touch Apps

Debugging Sencha Touch Applications

Evan Trimboli & Tommy Maintz

Page 3: Debugging Sencha Touch Apps

AgendaCommon Javascript Oversights

Investigating the ToolsTouch Debugging Specifics

Page 4: Debugging Sencha Touch Apps

Common Javascript Oversights

Page 5: Debugging Sencha Touch Apps

No CompilerCase sensitivity mattersCheck spellingDeclare variablesReserved words

Page 6: Debugging Sencha Touch Apps

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

Page 7: Debugging Sencha Touch Apps

Closures

Page 8: Debugging Sencha Touch Apps

Variable Binding

Page 9: Debugging Sencha Touch Apps

Variable Binding

Page 10: Debugging Sencha Touch Apps

Language FeaturesNo block level scopePrototypal inheritanceHigher order functions

Page 11: Debugging Sencha Touch Apps

Investigating The Tools

Page 12: Debugging Sencha Touch Apps

Chrome Debugger

Page 13: Debugging Sencha Touch Apps

Elements Screen

Page 14: Debugging Sencha Touch Apps

Elements TabView current DOM stateSearchingView/Modify styles dynamically

Page 15: Debugging Sencha Touch Apps

Scripts Screen

Page 16: Debugging Sencha Touch Apps

Scripts TabBreakpoints, step line by lineCall stackInspect locals

Page 17: Debugging Sencha Touch Apps

Resources Screen

Page 18: Debugging Sencha Touch Apps

Resources TabLoading time/sizeLoad informationFiltering

Page 19: Debugging Sencha Touch Apps

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

Page 20: Debugging Sencha Touch Apps

JSLint

Page 21: Debugging Sencha Touch Apps

JSLint - Code Quality ToolGlobal variablesTrailing commasUnreachable codeRequired blocksMuch more

Page 22: Debugging Sencha Touch Apps

RemoteJS

Page 23: Debugging Sencha Touch Apps

RemoteJS - Android

Page 24: Debugging Sencha Touch Apps

Touch Debugging Specifics

Page 25: Debugging Sencha Touch Apps

Data

Page 26: Debugging Sencha Touch Apps

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

Page 27: Debugging Sencha Touch Apps

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

Page 28: Debugging Sencha Touch Apps

Layouts

Page 29: Debugging Sencha Touch Apps

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

Page 30: Debugging Sencha Touch Apps

Dynamic LayoutsRemember doLayout & doComponentLayoutApply sizes to Components

Page 31: Debugging Sencha Touch Apps

Events & Scoping

Page 32: Debugging Sencha Touch Apps

What is “this”Contextual Information

HandlersCallbacksBlocks (Ext.each)

Page 33: Debugging Sencha Touch Apps

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

Page 34: Debugging Sencha Touch Apps

General Tips

Page 35: Debugging Sencha Touch Apps

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

Page 36: Debugging Sencha Touch Apps

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

Page 37: Debugging Sencha Touch Apps

Happy Debugging!