Debugging a Web App

The webOS TV SDK provides Web Inspector and Node Inspector for debugging web applications and JS Services. You can monitor the execution information of a web applications or a JS Service running on 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 application, ares-package script reduces and merges the source code when creating the package file (.ipk). ares-package script 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 application. However, these minifying jobs make debugging difficult.

 

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

ares-package --no-minify sampleApp

Creating package com.yourdomain.app_0.0.1_all.ipk in ./

 

--no-minify option is available for only Enyo web application.

 

For deployment purposes, the script is executed to minimize the code size of the web application. However, executing the code-minimizing script should be avoided for debugging purposes.

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

ares-inspect script provides Web Inspector for web application debugging. The running information of web application is displayed through the Web Inspector.

 

Execute the following command while the web application is running:

ares-inspect --device emulator --app com.yourdomain.app --open

  

You can use the Web Inspector as below:

 

Web_Inspector_Screen.png

 

The Web Inspector is based on Google Chrome Developer Tools. Refer to the https://developers.google.com/chrome-developer-tools/ for the detailed description of how to use Google Chrome Developer Tools.  Some versions of Google Chrome may not support the Web Inspector. For more information, refer to FAQ.

Launching Node Inspector

ares-inspect script provides Node Inspector for JS Service debugging. The running information of JS Service is displayed through the Node Inspector.

 

Execute the following command while the JS Service is working:

ares-inspect --device emulator --service com.yourdomain.app.service --open

 

You can use Node Inspector as below:

 

Node_Inspector_Screen.png

 

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

Testing a Local App

ares-server script can run web server based on app source directory. Web Browser has some restrictions related to security policy, on accessing local files (Same-origin policy). For this reason, this script provides simple web server to avoid 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 web server, use Control-C on prompt.

 

Navigation