TiConf US 2014

TICONF.US, NEW YORK, 10/05/2014

Debugging and Profiling Titanium Apps

TICONF.US, NEW YORK, 10/05/2014 2

Olivier Morandi Software engineer !

http://[email protected] @olivier_morandi https://github.com/omorandi


Where I’m from


• Ti app development

• Native module development (iOS/Android)

• Optimisations

• R&D

4


• Available tools

• Tools I wish would exist

• Experiments & hacks

5

This talk


• console.log() aka Ti.API.info()

• Ti Studio Debugger

6

Titanium JS Debugging Tools


• 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


Ti Inspector https://github.com/omorandi/TiInspector

8


Titanium debugger (iOS)

Ti JSCore Debugger

Agent

Custom TCP protocolhttp://docs.appcelerator.com/titanium/latest/#!/guide/Debugger_Protocol

1176979825728*breakpoint*create*app://app.js*116*1*0**1

1176979825728*created

TiStudio


Chrome Remote DebuggingChrome 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


Ti InspectorChrome Devtools

Ti InspectorTi debugger protocolWeb Inspector protocol

Ti JSCore Debugger

Agent


$ [sudo] npm install -g ti-inspector

12

Ti Inspector - Install


$ cd path/to/your/ti/project!

$ ti-inspector !

$ open http://localhost:8080!

$ titanium build -p ios —debug-host localhost:8999

13

Ti Inspector - Run


• Breakpoints

• Variable & object inspection

• Watches

14

Debugging


• Console & REPL

• Stepping

• Conditional breakpoints

15

Debugging


Ti Inspector demo

16


• 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


Node Inspector https://github.com/node-inspector/node-inspector

18


• 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


Node InspectorChrome Devtools

Node InspectorV8 debugger protocolWeb Inspector protocol

V8 Debugger

Agent


$ [sudo] npm install -g node-inspector

21

Node Inspector - Install


$ node-inspector !

$ titanium build -p android —debug-host localhost:5858!

$ open http://127.0.0.1:8080/debug?port=5858

22

Node Inspector - Run


• No console logging (only evaluation)

23

Limitations


Node Inspector demo

24


What about other Chrome Devtools features?

25


• Profiles ★ cpu ★ heap

• Timeline

• Network

• Page layout

26

Devtools


More opportunities to inspect the internal state and the behaviour of our app

27


TiScope (Very early work in progress)

28


• 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


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


TiScope demo (Android)

31


JS Function Tracing (Very early work in progress)

32


Tracing function calls on iOS


• Tiny modification in Ti-JSCore source code +

• Native iOS module !

• Produce a trace file

• Import into Chrome’s about:tracing page

34

JSCore tracing


Tracing demo

35


• 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


• twitter: @olivier_morandi

• email: [email protected]

37

Feedback needed


Q&A !

Thank you!

TiConf US 2014

Technology

Transcript of TiConf US 2014