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://titaniumninja.com!olivier.morandi@gmail.com @olivier_morandi https://github.com/omorandi

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

Where I’m from

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

• Ti app development

• Native module development (iOS/Android)

• Optimisations

• R&D

4

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

• Available tools

• Tools I wish would exist

• Experiments & hacks

5

This talk

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

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

• Ti Studio Debugger

6

Titanium JS Debugging Tools

TICONF.US, NEW YORK, 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

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

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

8

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

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

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

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

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

Ti InspectorChrome Devtools

Ti InspectorTi debugger protocolWeb Inspector protocol

Ti JSCore Debugger

Agent

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

$ [sudo] npm install -g ti-inspector

12

Ti Inspector - Install

TICONF.US, NEW YORK, 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

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

• Breakpoints

• Variable & object inspection

• Watches

14

Debugging

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

• Console & REPL

• Stepping

• Conditional breakpoints

15

Debugging

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

Ti Inspector demo

16

TICONF.US, NEW YORK, 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

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

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

18

TICONF.US, NEW YORK, 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

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

Node InspectorChrome Devtools

Node InspectorV8 debugger protocolWeb Inspector protocol

V8 Debugger

Agent

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

$ [sudo] npm install -g node-inspector

21

Node Inspector - Install

TICONF.US, NEW YORK, 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

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

• No console logging (only evaluation)

23

Limitations

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

Node Inspector demo

24

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

What about other Chrome Devtools features?

25

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

• Profiles ★ cpu ★ heap

• Timeline

• Network

• Page layout

26

Devtools

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

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

27

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

TiScope (Very early work in progress)

28

TICONF.US, NEW YORK, 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

TICONF.US, NEW YORK, 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)

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

TiScope demo (Android)

31

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

JS Function Tracing (Very early work in progress)

32

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

Tracing function calls on iOS

TICONF.US, NEW YORK, 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

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

Tracing demo

35

TICONF.US, NEW YORK, 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

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

• twitter: @olivier_morandi

• email: olivier.morandi@gmail.com

37

Feedback needed

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

Q&A !

Thank you!