#Ti Inspector

Ti Inspector allows debugging Appcelerator Titanium applications in the Chrome DevTools web interface.

The tool acts as a gateway by translating commands and messages between the Chrome DevTools Debugging Protocol and the Titanium Debugger Protocol (and vice-versa).

Currently only the iOS target platform is supported.

##Motivation Since my Titanium development workflow mainly revolves around Sublime Text and the CLI, and firing up Titanium Studio for tracking down bugs in the integrated debugger is most of the time a painfully slow activity (start the IDE, rebuild for debugging, etc.), I wanted a more agile way to fire up a JavaScript debug session. Moreover, when debugging native modules in Xcode, sometimes it would be nice to have a view on both sides (JS and native) of the code.

You can find a more detailed post and a short demo here

##NOTE - Titanium SDK 3.5.X

Currently Ti Inspector doesn't work correctly with Ti SDK 3.5.X. Since the 3.5.0 release, Titanium underwent major changes regarding the JavaScriptCore engine and its debugger library (libti_ios_debugger.a). 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

##Install

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

##Dev install In alternative, if you like to stay on the edge, you can pull the code from github and use npm link:

  $ git clone git@github.com:omorandi/TiInspector.git
  $ cd TiInspector
  $ npm install
  $ [sudo] npm link

##Using Ti Inspector

The 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:

    $ ti-inspector

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

The --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.

Features

  • Breakpoints: setting/removing breakpoints, conditional breakpoints
  • Call stack inspection (when execution is suspended)
  • Variables and objects inspection
  • Watch expressions
  • Step operations (step over, step-into, step-out)
  • Console logging
  • Expression evaluation in the console (only when execution is suspended)
  • Suspend on exceptions (disabled by default)
  • Direct source editing and CMD-S for saving changes in your original JS files

Limitations

  • Android is not currently supported: supporting Android will mean implementing the V8 remote debugging protocol in Ti Inspector.
  • On device debugging is not supported since it's treated in a special way by the CLI and Studio, though there exist some hackish ways for enabling it in a semi-manual way
  • Expressions can only be evaluated when the execution is suspended
  • TiAlloy (and any other, e.g. CoffeeScript) source mapping is not supported
  • Multiple contexts (e.g. Ti.UI.Windows created through the url property) are not correctly handled

Themes FTW (available from V. 0.0.3) - NOTE: NOT WORKING SINCE v0.1.2

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 public/themes/ directory.

Adding a custom Theme

If you don't like the already available themes, you can download one from http://devthemez.com/themes/chrome-developer-tools, then:

  • locate the directory where Ti Inspector has been installed by npm, which is probably /usr/local/lib/node_modules/ti-inspector. Let's call it $INSTALL_DIR
  • Copy the downloaded css file to $INSTALL_DIR/public/themes
  • set the TiInspector.preferences.devtools_theme property in the $INSTALL_DIR/public/preferences.js file accordingly
  • start Ti Inspector, or simply reload the inspector panel if already running, and enjoy your new theme

Changelog

0.1.2

  • Upgraded devtools to latest Blink revision
  • Fixed breakpoint handling

0.1.1

  • Fixed breakpoints handling in platform-specific files (full Ti 3.2.0 support)

0.1.0

  • Fixed issues caused by latest versions of Jade in the inspection dashboard
  • Fixed listing of platform-specific files (issue #16)

0.0.5

  • Fixed websocket errors in latest Chrome Version 30.0.1599.66 (issue #7)
  • Enabled console panel persistence across reloads (issue #3)

0.0.4

  • Added "Debugger.pause" command handling
  • Fixed dashboard app not showing debug sessions (issue #5)
  • Updated devtools to stable Chrome 29.0.1547.65 and fixed Cobalt.css theme

0.0.3

  • Automatic reload of the DevTools panel when a new debugging session is started: no need to go back and forth from the dashboard. Simply reload your app and Ti Inspector will restart
  • Basic support for Chrome DevTools custom themes (chose a theme in the public/js/preferences.js file and reload the web app in the browser)

Credits

Ti Inspector was originally inspired by node-inspector, started by (Danny Coates)[https://github.com/dannycoates]

License

See LICENSE file



#Ti检查员

Ti Inspector允许在Chrome DevTools Web界面中调试Appcelerator Titanium应用程序。

该工具作为网关,通过在 Chrome DevTools调试协议< / a>和 Titanium Debugger Protocol (反之亦然)。

目前仅支持iOS目标平台。

动机 由于我的Titanium开发工作流程主要围绕着Sublime Text和CLI,并且启动Titanium Studio来跟踪集成调试器中的错误大多数时候是一个非常慢的活动(启动IDE,重新调试等),I想要一个更灵活的方法来启动JavaScript调试会话。此外,当在Xcode中调试本机模块时,有时候可以在代码的两面(JS和native)上看到一个视图。

您可以在此处找到更详细的帖子和简短演示

##注 - Titanium SDK 3.5.X

目前Ti Inspector在Ti SDK 3.5.X中无法正常工作。 自3.5.0版本以来,Titanium对JavaScriptCore引擎及其调试器库( libti_ios_debugger.a )进行了重大更改。 特别是,目前已知的问题是:

前面的工具也在Ti Studio调试器中看到。关注并查看 https://jira.appcelerator.org/browse/TIMOB-18616 了解更多信息。

尽管这些问题正在进行中,作为一个临时解决方案,Ti Inspector可以在调试期间使用Ti SDK 3.4.1.GA构建应用程序。

##安装

要运行Ti Inspector,需要一个工作的 node.js 设置。

Ti Inspector模块可以通过npm与

进行安装
    $ [sudo] npm install -g ti-inspector

##开发安装 或者,如果你想保持在边缘,你可以从github中提取代码,并使用 npm link

  $ git clone git@github.com:omorandi/TiInspector.git
  $ cd TiInspector
  $ npm install
  $ [sudo] npm link

##使用Ti Inspector

可以使用以下参数从命令行调用 ti-inspector 脚本:

    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.
假设您在包含要调试的Titanium项目的目录上打开终端,您可以简单地发出:

    $ ti-inspector

使用默认参数值运行脚本,然后将浏览器指向 http:// localhost:8080 ,其中显示当前的网页显示项目,说明没有活动的调试会话。

为了启动Titanium应用程序进行调试,您必须使用Titcode CLI build 命令,使用 - debug-host 隐藏选项。例如:

    $ titanium build -p iphone --debug-host localhost:8999

- debug-host 参数表示调试服务器正在侦听的 host:port 对。这通常由Titanium Studio提供,当项目以调试模式启动时,但是在我们的情况下,Ti Inspector将作为调试服务器(默认监听tcp端口8999)用于正在运行的应用程序。

应用程序在iOS模拟器中运行后,只有启动画面才可见,而在浏览器中以前打开的页面中将列出当前的调试会话:

通过点击它,DevTools页面将打开,显示 app.js 文件源代码。

从那里开始,您可以通过在控制面板等中设置断点,逐步执行代码,观察变量或评估表达式来调试应用程序。

功能

  • 断点:设置/删除断点,条件断点
  • 调用堆栈检查(执行中止时)
  • 变量和对象检查
  • 观看表情
  • 步骤操作(步骤,步入,退出)
  • 控制台日志记录
  • 控制台中的表达式评估(仅在执行中止时)
  • 暂停异常(默认情况下禁用)
  • 直接源编辑和CMD-S保存原始JS文件中的更改

限制

  • 目前不支持Android:支持Android将意味着在Ti Inspector中实施 V8远程调试协议
  • 设备调试不受支持,因为CLI和Studio采用特殊的方式处理设备调试,尽管存在一些以半手动方式启用它的方法
  • 表达式只能在执行暂停时进行评估
  • 不支持TiAlloy(和任何其他,例如CoffeeScript)源映射
  • 多个上下文(例如通过 url 属性创建的Ti.UI.Windows)未正确处理

主题FTW(可从V. 0.0.3中获得) - 注意:不工作v0.1.2

可以轻松地定制DevTools应用程序样式,并且可以从 http://devthemez.com获取一些开源定制CSS / themes / chrome-developer-tools 。 这些也可以与Ti Inspector一起使用,Ti Inspector已经在 public / themes / 目录中包含了一些。

添加自定义主题

如果您不喜欢现有的主题,可以从 http://devthemez.com/themes / chrome-developer-tools ,然后:

  • 找到npm中Ti Inspector已安装的目录,这可能是 / usr / local / lib / node_modules / ti-inspector 。让我们称之为 $ INSTALL_DIR
  • 将下载的css文件复制到 $ INSTALL_DIR / public / themes
  • $ INSTALL_DIR / public / preferences.js 文件中相应设置 TiInspector.preferences.devtools_theme 属性
  • 启动Ti Inspector,或者如果已经运行,只需重新加载检查器面板,并享受您的新主题

更改日志

0.1.2

  • 将升级版的devtools升级到最新的Blink修订版本
  • 固定断点处理

0.1.1

  • 在平台特定文件(完整的Ti 3.2.0支持)中修复断点处理

0.1.0

  • 修复检查仪表板中最新版本的玉石引起的问题
  • 修复平台特定文件(问题#16)的列表

0.0.5

  • 在最新的Chrome版本30.0.1599.66(问题#7)
  • 中修复了Websocket错误
  • 启用控制台面板持久化跨重载(问题#3)

0.0.4

  • 添加Debugger.pause命令处理
  • 修正仪表板应用程序不显示调试会话(问题#5)
  • 将devtools更新到稳定的Chrome 29.0.1547.65和固定的Cobalt.css主题

0.0.3

  • 当新的调试会话启动时,自动重新加载DevTools面板:无需从仪表板中前后移动。只需重新加载您的应用程序,Ti Inspector将重新启动
  • 对Chrome DevTools自定义主题的基本支持(在 public / js / preferences.js 文件中选择一个主题,并在浏览器中重新加载网络应用程序)

信用

Ti Inspector最初是由(Danny Coates)开始的节点检查器启发的[https://github.com/dannycoates ]

许可证

请参阅LICENSE文件




相关问题推荐