Debugging Tabris.js

Tabris.js supports the console.log, info, warn, and error functions that are useful for debugging. The developer console also allows entering javascript commands at runtime. However, for more complex applications it is usually preferable to use a full-fledged debugger that lets you pause script execution and inspect variables.

Android using Chrome Developer Tools

You can debug your app using the Chrome Developer Tools. Detailed Instructions by Google can also be found here.

The Android device and running Tabris app should appear in Chrome. Click “inspect”

Go to the “Sources” tab and set a breakpoint.

If the Android Device does not show up in Chrome you can try disable and re-enable USB debugging on your device or switch between connecting it as a media device (“MTP”) or Camera (“PTP”). It can take a few seconds for the device to appear in Chrome. If nothing else helps use the adb tool (part of the Android SDK platform tools) and run adb devices to make sure the device is detected.

In this state you are debugging the source code as it is bundled with the app. You can also use the developer console to load javascript files from your developer machine via tabris serve. That way you don’t need to re-build the app for each change.

In this state you are debugging the source code as it is bundled with the app. You can also use the developer console to load javascript files from your developer machine via tabris serve. That way you don’t need to re-build the app for each change.

Open the resulting {project-dir}\build\cordova\platforms\windows\CordovaApp.sln file in Visual Studio

Open the context menu of the Project “EclipseSource.Tabris.CordovaLauncher”, go to “Properties -> Debug -> Debugger type ->” and set all fields to “Script”.

Add a breakpoint to your JavaScript code. You can find it in the “CordovaApp” project under “/www/app/”.

Start the app in the “Debug” configuration for the desired target and architecture (not “Any CPU”).

Once you encounter the breakpoint, a dialog may appear that will let you choose a debugger. Simply click “Yes”.

In this state you are debugging the source code as it is bundled with the solution. Any changes on the copy or the original will have to be manually copied to the other. If you want to avoid this, do the following:

Close the Solution

In Windows Explorer, delete the contents of {project-dir}\build\cordova\platforms\windows\www\app