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.

2. Debugging Sencha Touch
Applications
Evan Trimboli & Tommy Maintz

3. Agenda
Common Javascript Oversights
Investigating the Tools
Touch Debugging Specifics

4. Common Javascript
Oversights

5. No Compiler
Case sensitivity matters
Check spelling
Declare variables
Reserved words

6. Truthiness & Equality
No need for explicit true value
Type coercion not performed by ===
null/undefined are di erent!

7. Closures

8. Variable Binding

9. Variable Binding

10. Language Features
No block level scope
Prototypal inheritance
Higher order functions

11. Investigating The Tools

12. Chrome Debugger

13. Elements Screen

14. Elements Tab
View current DOM state
Searching
View/Modify styles dynamically

15. Scripts Screen

16. Scripts Tab
Breakpoints, step line by line
Call stack
Inspect locals

17. Resources Screen

18. Resources Tab
Loading time/size
Load information
Filtering

19. Console
Interactive commands
log()/warn()/error()
Counting/Grouping

20. JSLint

21. JSLint - Code Quality Tool
Global variables
Trailing commas
Unreachable code
Required blocks
Much more

22. RemoteJS

23. RemoteJS - Android

24. Touch Debugging Specifics

25. Data

26. Loading Data
Is the URL correct?
Did the request complete?
Was the data valid?
Does the Model match the Component?

27. Event Driven Model
Ajax - ASYNCHRONOUS
Execution doesn’t stop
Must use appropriate callbacks

28. Layouts

29. Over-nesting
Panels with no layout
Implicit layouts (Carousel, TabPanel)

30. Dynamic Layouts
Remember doLayout & doComponentLayout
Apply sizes to Components

31. Events & Scoping

32. What is “this”
Contextual Information
Handlers
Callbacks
Blocks (Ext.each)

33. Are You Listening
Capture - All events on an instance
Observe - Specific events on all instances

34. General Tips

35. Use the Right Files
sencha-touch.js - Minified, compressed
sencha-touch-debug.js - Whitespace,
comments

36. Getting Further Help
Read the documentation (then read it again)
Consult the source
Write a test case
Know how to ask for help

37. Happy Debugging!