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.

Developer Machine Requirements:

Android Device Requirements:

How to Debug:

  • Start the Tabris.js app.
  • In Google Chrome enter chrome://inspect/#devices
  • Connect your Android device via USB directly to the developer machine. Your device may ask you to allow USB debugging.
  • 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.

iOS using Safari

Developer Machine Requirements:

  • macOS
  • Safari Browser, with the developer Menu enabled under “Safari -> Preferences -> Advanced”.

iOS Device Requirements:

How to Debug:

  • Connect your iOS device via USB directly to the developer machine.
  • Start the Tabris.js app.
  • In Safari go to “Develop -> {name-of-your-device} -> {name-of-your-app} -> JSContext” (If there are multiple entries, kill and restart the entire app)
  • Go to the “Resources” tab and set a breakpoint.

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.