This document summarizes Olivier Morandi's talk on debugging and profiling Titanium apps. The talk introduces Ti Inspector, a tool that allows debugging Titanium apps using Chrome DevTools. It also discusses Node Inspector for debugging on Android and prototypes for profiling apps using Chrome's timeline and tracing features. Future work is planned to integrate these capabilities into a unified debugging and profiling tool.

1. TICONF.US,NEWYORK,10/05/2014
Debugging and Profiling
Titanium Apps

2. TICONF.US,NEWYORK,10/05/2014 2
Olivier Morandi
Software engineer
!
http://titaniumninja.com!
olivier.morandi@gmail.com
@olivier_morandi
https://github.com/omorandi

3. TICONF.US,NEWYORK,10/05/2014 3
Where I’m from

4. TICONF.US,NEWYORK,10/05/2014
• Ti app development
• Native module development (iOS/Android)
• Optimisations
• R&D
4

5. TICONF.US,NEWYORK,10/05/2014
• Available tools
• Tools I wish would exist
• Experiments & hacks
5
This talk

6. TICONF.US,NEWYORK,10/05/2014
• console.log() aka Ti.API.info()
• Ti Studio Debugger
6
Titanium JS Debugging Tools

7. TICONF.US,NEWYORK,10/05/2014
• If abused, logging statements add too much
clutter to your code + they’re not
inexpensive
• I want to be able to debug both JS and
native code (iOS modules) at the same time
• Ti debugger doesn’t fit in a CLI-based
workflow
7
Problems

8. TICONF.US,NEWYORK,10/05/2014
Ti Inspector
https://github.com/omorandi/TiInspector
8

9. TICONF.US,NEWYORK,10/05/2014 9
Titanium debugger (iOS)
Ti JSCore
Debugger
Agent
Custom TCP protocol
http://docs.appcelerator.com/titanium/latest/#!/guide/Debugger_Protocol
1176979825728*breakpoint*create*app://app.js*116*1*0**1
1176979825728*created
TiStudio

10. TICONF.US,NEWYORK,10/05/2014 10
Chrome Remote Debugging
Chrome Devtools Inspected Page
JSON-RPC protocol over Websockets
{"method":"Debugger.setBreakpointByUrl","params":
{"lineNumber":32,"url":"todo-view.js","columnNumber":
0,"condition":""},"id":157}
{"result":{"breakpointId":"odo-view.js:32:0","locations":
[{"scriptId":"96","lineNumber":32,"columnNumber":7}]},"id":157}
https://developers.google.com/chrome-developer-tools/docs/debugger-protocol?hl=it

11. TICONF.US,NEWYORK,10/05/2014 11
Ti Inspector
Chrome Devtools
Ti Inspector
Ti debugger protocolWeb Inspector protocol
Ti JSCore
Debugger
Agent

12. TICONF.US,NEWYORK,10/05/2014
$ [sudo] npm install -g ti-inspector
12
Ti Inspector - Install

13. TICONF.US,NEWYORK,10/05/2014
$ cd path/to/your/ti/project!
$ ti-inspector !
$ open http://localhost:8080!
$ titanium build -p ios —debug-host localhost:8999
13
Ti Inspector - Run

14. TICONF.US,NEWYORK,10/05/2014
• Breakpoints
• Variable & object inspection
• Watches
14
Debugging

15. TICONF.US,NEWYORK,10/05/2014
• Console & REPL
• Stepping
• Conditional breakpoints
15
Debugging

16. TICONF.US,NEWYORK,10/05/2014
Ti Inspector demo
16

17. TICONF.US,NEWYORK,10/05/2014
• iOS only
• On device debugging
• Possible running the project through Xcode
• There’ll be a module for that ;-)
• Alloy source maps
• No support for multiple JS threads
• e.g. Ti.UI.Window created via url property
• Expression eval not supported if not suspended
17
What’s missing

18. TICONF.US,NEWYORK,10/05/2014
Node Inspector
https://github.com/node-inspector/node-inspector
18

19. TICONF.US,NEWYORK,10/05/2014
• Originally implemented by Danny Coates,
it’s a gateway between Chrome Devtools
and the V8 debugging agent
• Strongloop recently took over the project
and started improving on it
• It works for debugging Ti Apps on Android
19
Node Inspector

20. TICONF.US,NEWYORK,10/05/2014 20
Node Inspector
Chrome Devtools
Node Inspector
V8 debugger protocolWeb Inspector protocol
V8
Debugger
Agent

21. TICONF.US,NEWYORK,10/05/2014
$ [sudo] npm install -g node-inspector
21
Node Inspector - Install

22. TICONF.US,NEWYORK,10/05/2014
$ node-inspector !
$ titanium build -p android —debug-host localhost:5858!
$ open http://127.0.0.1:8080/debug?port=5858
22
Node Inspector - Run

23. TICONF.US,NEWYORK,10/05/2014
• No console logging (only evaluation)
23
Limitations

24. TICONF.US,NEWYORK,10/05/2014
Node Inspector demo
24

25. TICONF.US,NEWYORK,10/05/2014
What about other Chrome Devtools features?
25

26. TICONF.US,NEWYORK,10/05/2014
• Profiles
★ cpu
★ heap
• Timeline
• Network
• Page layout
26
Devtools

27. TICONF.US,NEWYORK,10/05/2014
More opportunities to inspect the internal state
and the behaviour of our app
27

28. TICONF.US,NEWYORK,10/05/2014
TiScope
(Very early work in progress)
28

29. TICONF.US,NEWYORK,10/05/2014
• Ti Inspector 2.0
★ Instrument Titanium
• events
• network requests
• other sources of interesting behaviour
★ Expose JS engine information
• Execution profiles
• Memory behaviour
★ Analysis through Chrome devtools
29
TiScope

30. TICONF.US,NEWYORK,10/05/2014
• Android only
• At the moment: custom Ti SDK build
★ Some instrumentation hooks added to Ti
proxy implementation
★ Instrumenting agents living in self
contained Java + native library
30
How it works (now)

31. TICONF.US,NEWYORK,10/05/2014
TiScope demo
(Android)
31

32. TICONF.US,NEWYORK,10/05/2014
JS Function Tracing
(Very early work in progress)
32

33. TICONF.US,NEWYORK,10/05/2014 33
Tracing function calls on iOS

34. TICONF.US,NEWYORK,10/05/2014
• Tiny modification in Ti-JSCore source code
+
• Native iOS module
!
• Produce a trace file
• Import into Chrome’s about:tracing page
34
JSCore tracing

35. TICONF.US,NEWYORK,10/05/2014
Tracing demo
35

36. TICONF.US,NEWYORK,10/05/2014
• Add more instrumenting agents
• Implement the same on iOS
• Stabilise the code
• Integrate everything together in a self
contained tool
★ possibly a CLI build hook
36
Future plans

37. TICONF.US,NEWYORK,10/05/2014
• twitter: @olivier_morandi
• email: olivier.morandi@gmail.com
37
Feedback needed

38. TICONF.US,NEWYORK,10/05/2014
Q&A
!
Thank you!