Slides for my talk at TiConf US 2014

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!