TiConf US 2014
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

TiConf US 2014

on

  • 1,034 views

Slides for my talk at TiConf US 2014

Slides for my talk at TiConf US 2014

Statistics

Views

Total Views
1,034
Views on SlideShare
846
Embed Views
188

Actions

Likes
3
Downloads
10
Comments
1

5 Embeds 188

http://feedly.com 79
https://twitter.com 50
http://mobiletou.ch 48
http://www.feedspot.com 9
http://r.awks.jp 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Very cool! Nice work with getting Chrome Dev Tools to work with Titanium. Just loaded it up and it worked really well. Much appreciated.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TiConf US 2014 Presentation Transcript

  • 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!