TICONF.US,NEWYORK,10/05/2014
Debugging and Profiling
Titanium Apps
TICONF.US,NEWYORK,10/05/2014 2
Olivier Morandi
Software engineer
!
http://titaniumninja.com!
olivier.morandi@gmail.com
@ol...
TICONF.US,NEWYORK,10/05/2014 3
Where I’m from
TICONF.US,NEWYORK,10/05/2014
• Ti app development
• Native module development (iOS/Android)
• Optimisations
• R&D
4
TICONF.US,NEWYORK,10/05/2014
• Available tools
• Tools I wish would exist
• Experiments & hacks
5
This talk
TICONF.US,NEWYORK,10/05/2014
• console.log() aka Ti.API.info()
• Ti Studio Debugger
6
Titanium JS Debugging Tools
TICONF.US,NEWYORK,10/05/2014
• If abused, logging statements add too much
clutter to your code + they’re not
inexpensive
•...
TICONF.US,NEWYORK,10/05/2014
Ti Inspector
https://github.com/omorandi/TiInspector
8
TICONF.US,NEWYORK,10/05/2014 9
Titanium debugger (iOS)
Ti JSCore
Debugger
Agent
Custom TCP protocol
http://docs.appcelerat...
TICONF.US,NEWYORK,10/05/2014 10
Chrome Remote Debugging
Chrome Devtools Inspected Page
JSON-RPC protocol over Websockets
{...
TICONF.US,NEWYORK,10/05/2014 11
Ti Inspector
Chrome Devtools
Ti Inspector
Ti debugger protocolWeb Inspector protocol
Ti JS...
TICONF.US,NEWYORK,10/05/2014
$ [sudo] npm install -g ti-inspector
12
Ti Inspector - Install
TICONF.US,NEWYORK,10/05/2014
$ cd path/to/your/ti/project!
$ ti-inspector !
$ open http://localhost:8080!
$ titanium build...
TICONF.US,NEWYORK,10/05/2014
• Breakpoints
• Variable & object inspection
• Watches
14
Debugging
TICONF.US,NEWYORK,10/05/2014
• Console & REPL
• Stepping
• Conditional breakpoints
15
Debugging
TICONF.US,NEWYORK,10/05/2014
Ti Inspector demo
16
TICONF.US,NEWYORK,10/05/2014
• iOS only
• On device debugging
• Possible running the project through Xcode
• There’ll be a...
TICONF.US,NEWYORK,10/05/2014
Node Inspector
https://github.com/node-inspector/node-inspector
18
TICONF.US,NEWYORK,10/05/2014
• Originally implemented by Danny Coates,
it’s a gateway between Chrome Devtools
and the V8 d...
TICONF.US,NEWYORK,10/05/2014 20
Node Inspector
Chrome Devtools
Node Inspector
V8 debugger protocolWeb Inspector protocol
V...
TICONF.US,NEWYORK,10/05/2014
$ [sudo] npm install -g node-inspector
21
Node Inspector - Install
TICONF.US,NEWYORK,10/05/2014
$ node-inspector !
$ titanium build -p android —debug-host localhost:5858!
$ open http://127....
TICONF.US,NEWYORK,10/05/2014
• No console logging (only evaluation)
23
Limitations
TICONF.US,NEWYORK,10/05/2014
Node Inspector demo
24
TICONF.US,NEWYORK,10/05/2014
What about other Chrome Devtools features?
25
TICONF.US,NEWYORK,10/05/2014
• Profiles
★ cpu
★ heap
• Timeline
• Network
• Page layout
26
Devtools
TICONF.US,NEWYORK,10/05/2014
More opportunities to inspect the internal state
and the behaviour of our app
27
TICONF.US,NEWYORK,10/05/2014
TiScope
(Very early work in progress)
28
TICONF.US,NEWYORK,10/05/2014
• Ti Inspector 2.0
★ Instrument Titanium
• events
• network requests
• other sources of inter...
TICONF.US,NEWYORK,10/05/2014
• Android only
• At the moment: custom Ti SDK build
★ Some instrumentation hooks added to Ti
...
TICONF.US,NEWYORK,10/05/2014
TiScope demo
(Android)
31
TICONF.US,NEWYORK,10/05/2014
JS Function Tracing
(Very early work in progress)
32
TICONF.US,NEWYORK,10/05/2014 33
Tracing function calls on iOS
TICONF.US,NEWYORK,10/05/2014
• Tiny modification in Ti-JSCore source code
+
• Native iOS module
!
• Produce a trace file
• I...
TICONF.US,NEWYORK,10/05/2014
Tracing demo
35
TICONF.US,NEWYORK,10/05/2014
• Add more instrumenting agents
• Implement the same on iOS
• Stabilise the code
• Integrate ...
TICONF.US,NEWYORK,10/05/2014
• twitter: @olivier_morandi
• email: olivier.morandi@gmail.com
37
Feedback needed
TICONF.US,NEWYORK,10/05/2014
Q&A
!
Thank you!
Upcoming SlideShare
Loading in …5
×

TiConf US 2014

1,949 views

Published on

Slides for my talk at TiConf US 2014

Published in: Technology, Design
1 Comment
4 Likes
Statistics
Notes
  • Very cool! Nice work with getting Chrome Dev Tools to work with Titanium. Just loaded it up and it worked really well. Much appreciated.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,949
On SlideShare
0
From Embeds
0
Number of Embeds
254
Actions
Shares
0
Downloads
14
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

TiConf US 2014

  1. 1. TICONF.US,NEWYORK,10/05/2014 Debugging and Profiling Titanium Apps
  2. 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. 3. TICONF.US,NEWYORK,10/05/2014 3 Where I’m from
  4. 4. TICONF.US,NEWYORK,10/05/2014 • Ti app development • Native module development (iOS/Android) • Optimisations • R&D 4
  5. 5. TICONF.US,NEWYORK,10/05/2014 • Available tools • Tools I wish would exist • Experiments & hacks 5 This talk
  6. 6. TICONF.US,NEWYORK,10/05/2014 • console.log() aka Ti.API.info() • Ti Studio Debugger 6 Titanium JS Debugging Tools
  7. 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. 8. TICONF.US,NEWYORK,10/05/2014 Ti Inspector https://github.com/omorandi/TiInspector 8
  9. 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. 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. 11. TICONF.US,NEWYORK,10/05/2014 11 Ti Inspector Chrome Devtools Ti Inspector Ti debugger protocolWeb Inspector protocol Ti JSCore Debugger Agent
  12. 12. TICONF.US,NEWYORK,10/05/2014 $ [sudo] npm install -g ti-inspector 12 Ti Inspector - Install
  13. 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. 14. TICONF.US,NEWYORK,10/05/2014 • Breakpoints • Variable & object inspection • Watches 14 Debugging
  15. 15. TICONF.US,NEWYORK,10/05/2014 • Console & REPL • Stepping • Conditional breakpoints 15 Debugging
  16. 16. TICONF.US,NEWYORK,10/05/2014 Ti Inspector demo 16
  17. 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. 18. TICONF.US,NEWYORK,10/05/2014 Node Inspector https://github.com/node-inspector/node-inspector 18
  19. 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. 20. TICONF.US,NEWYORK,10/05/2014 20 Node Inspector Chrome Devtools Node Inspector V8 debugger protocolWeb Inspector protocol V8 Debugger Agent
  21. 21. TICONF.US,NEWYORK,10/05/2014 $ [sudo] npm install -g node-inspector 21 Node Inspector - Install
  22. 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. 23. TICONF.US,NEWYORK,10/05/2014 • No console logging (only evaluation) 23 Limitations
  24. 24. TICONF.US,NEWYORK,10/05/2014 Node Inspector demo 24
  25. 25. TICONF.US,NEWYORK,10/05/2014 What about other Chrome Devtools features? 25
  26. 26. TICONF.US,NEWYORK,10/05/2014 • Profiles ★ cpu ★ heap • Timeline • Network • Page layout 26 Devtools
  27. 27. TICONF.US,NEWYORK,10/05/2014 More opportunities to inspect the internal state and the behaviour of our app 27
  28. 28. TICONF.US,NEWYORK,10/05/2014 TiScope (Very early work in progress) 28
  29. 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. 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. 31. TICONF.US,NEWYORK,10/05/2014 TiScope demo (Android) 31
  32. 32. TICONF.US,NEWYORK,10/05/2014 JS Function Tracing (Very early work in progress) 32
  33. 33. TICONF.US,NEWYORK,10/05/2014 33 Tracing function calls on iOS
  34. 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. 35. TICONF.US,NEWYORK,10/05/2014 Tracing demo 35
  36. 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. 37. TICONF.US,NEWYORK,10/05/2014 • twitter: @olivier_morandi • email: olivier.morandi@gmail.com 37 Feedback needed
  38. 38. TICONF.US,NEWYORK,10/05/2014 Q&A ! Thank you!

×