Debugging Web App

The webOS TV SDK provides Web Inspector and Node Inspector for debugging web apps and JS services. You can monitor the execution information of web apps or JS services running on the target device with Web Inspector and Node Inspector. For this, you need to create a package file (.ipk) without minifying. This section describes how to create a package file and execute Web Inspector and Node Inspector for debugging.

Packaging a Web App for Debugging

For Enyo web apps, the ares-package command reduces and merges the source code when creating the package file (.ipk). The ares-package command adjusts and shrinks variable names and line spacing. It also merges multiple files into a single file to reduce the source code size and file loading time. You may use other scripts to minify non-Enyo web apps. However, these minifying jobs make debugging difficult.

For this reason, you should not carelessly reduce and merge the source code to debug web apps and JS services. It becomes difficult to check the information if the source code is reduced or the files are merged. Do not run the minifying task, using the --no-minify option for Enyo web app as below. --no-minify option is available only for Enyo web apps.

ares-package --no-minify sampleApp

Creating package com.yourdomain.app_0.0.1_all.ipk in ./
Since the size of the package files for debugging is larger than that of the basic setup files, use the package files for debugging purposes only.

Launching Web Inspector

The ares-inspect command provides Web Inspector for debugging web apps. The running information of the web app is displayed through Web Inspector.

Execute the following command while the web app is running:

ares-inspect --device emulator --app --open

If you have not installed the IDE on your PC when you use the --open option, Web Inspector opens on the default browser of your PC; however, if you have installed the IDE, Web Inspector opens on the bundle browser of the webOS TV SDK. The bundle browser of webOS TV SDK 6.0 is Chromium v68.

You can see Web Inspector as below. 

Screenshot of Web Inspector

Web Inspector is based on Google Chrome Developer Tools. Refer to the Google Developers for the detailed description of how to use Google Chrome Developer Tools.  Some versions of Google Chrome may not support Web Inspector. For more information, refer to FAQ.

Launching Node Inspector

The ares-inspect command provides Node Inspector for debugging JS services. The running information of JS service is displayed through Node Inspector.

Execute the following command while the JS service is working:

ares-inspect --device emulator --service --open

You can see Node Inspector as below:

Screenshot of Node Inspector

For more information about Node Inspector, refer to the GitHub of Node Inspector.

Testing a Local App

The ares-server command can run a web server based on the app source directory. The web browser has some restrictions related to security policy on accessing local files (Same-origin policy). For this reason, this script provides a simple webserver to avoid the security policy of browsers.

Execute the command to start a web server on your app source directory. You can open your app with the given URL.

ares-server ./source


Local server running on http://localhost:7496

If you want to open with a bundled browser (Chromium) directly, use --open option as below:

ares-server ./source --open
To terminate the webserver, use Control-C on prompt.