Debug Appcelerator Titanium apps in Chrome DevTools
Ti Inspector allows debugging Appcelerator Titanium applications in the Chrome DevTools web interface.
Currently only the iOS target platform is supported.
You can find a more detailed post and a short demo here
Currently Ti Inspector doesn't work correctly with Ti SDK 3.5.X.
In particular, the currently known issues are:
The former is also seen in the Ti Studio debugger. Follow and watch https://jira.appcelerator.org/browse/TIMOB-18616 for additional info.
While these issues are being worked on, as a temporary solution, Ti Inspector can be used by building the app with Ti SDK 3.4.1.GA during debugging
For running Ti Inspector a working node.js setup is required.
The Ti Inspector module can be installed through npm with
$ [sudo] npm install -g ti-inspector
In alternative, if you like to stay on the edge, you can pull the code from github and use
$ git clone email@example.com:omorandi/TiInspector.git$ cd TiInspector$ npm install$ [sudo] npm link
ti-inspector script can be invoked from the command line with the following arguments:
ti-inspector [Options] [TiProjectDir]options:--web-host=[host] host for the inspector server (default localhost)--web-port=[port] port for the inspector server (default 8080)--debugger-port=[port] port for the Titanium debug server (default 8999)TiProjectDir:Directory containing a Titanium app project.If not specified, the current directory is used.
Supposing you have a terminal open on a directory containing the Titanium project you want to debug you can simply issue:
which runs the script with the default argument values, then point the browser to http://localhost:8080 where a web page for the current project is shown, telling that no active debugging session is present.
In order to start the Titanium application for debugging it, you have to use the Titanium CLI
build command, using the
--debug-host hidden option. For example:
$ titanium build -p iphone --debug-host localhost:8999
--debug-host argument represents the
host:port pair where the debug server is listening. This is normally provided by Titanium Studio when the project is started in debug mode, however in our case Ti Inspector will act as a debug server (listening by default on tcp port 8999) for the running app.
Once the app is running in the iOS Simulator, only the splash screen will be visible, while in the page previously opened in the browser will list the current debug session:
By clicking on it, the DevTools page will be open, showing the
app.js file source code.
From there on, you can debug your application by setting breakpoints, stepping through code, watching variables, or evaluating expressions in the console panel, etc.
urlproperty) are not correctly handled
The DevTools app styling can be customized quite easily and some open source custom css are available from http://devthemez.com/themes/chrome-developer-tools.
These can also be used with Ti Inspector, which already includes some in the
If you don't like the already available themes, you can download one from http://devthemez.com/themes/chrome-developer-tools, then:
/usr/local/lib/node_modules/ti-inspector. Let's call it
TiInspector.preferences.devtools_themeproperty in the
public/js/preferences.jsfile and reload the web app in the browser)
Ti Inspector was originally inspired by node-inspector, started by (Danny Coates)[https://github.com/dannycoates]
See LICENSE file