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.

It supports testing without creating and installing a package file (.ipk) for development convenience. 

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 com.yourdomain.app --open

If you use the --open option, Web Inspector opens on the default browser of your PC.

Note that the Web and Node Inspectors work on WebKit-based browsers (Chrome and Safari) properly but not on non-WebKit browsers (IE, Firefox).

To use the Inspector, you need to have Chromium installed, of which the version is compatible with the webOS TV version. The following table shows the compatible Chromium version by webOS TV version and their downloadn links.

webOS TV version

Release year of webOS TV

Supported Chrome versions for using Inspector

webOS TV 22

2022

  • Latest-version Chrome

webOS TV 6.0

2021

webOS TV 5.0

2020

webOS TV 4.x

2018-2019

webOS TV 3.x

2016-2017

webOS TV 2.0

2015

webOS TV 1.0

2014

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 com.yourdomain.app.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 without Installation

You can test code changes to your web app without packaging, installing, and running the app on a TV device.

The ares-launch --hosted(-H) command allows you to test the code changes easily on the TV. If the --hosted option is used with the directory path, an app with id com.sdk.ares.hostedapp is launched on the device and it opens the files in the directory.

From CLI v1.12.0, the auto-reloading function is added, so as soon as you make and save modification to your app files, the app on the TV device is automatically reloaded.

How to ignore specific files from auto-reloading

To exclude certain files with specific extensions or under specific directories from auto-reloading, create a .reloadignore file. This .reloadignore file should be located in the root directory of the app to test, and the file itself will be excluded from packaging of the app.

Add the absolute or relative path of the files or directories to exclude from auto-reloading into the .reloadignore file. Each item will be distinguished by a line feed, and the relative path of items (except for cases starting with **) will converted into an absolute path based on the root directory of the app before being applied.

Even if you modify the .reloadignore file while auto-reloading is on, the modification will apply immediately without needing to terminate and re-run the command.

Example

The following is an example of testing a sample app after creating it using CLI, while skipping the steps for packaging and installation.

# Generate the sample app for test
$ ares-generate APP_DIR
? app id com.domain.app
? title new app
? version 0.0.1
Generating basic in D:\webOS_TV_SDK\CLI\bin\APP_DIR
Success
 
# Test the sample app on the TARGET_DEVICE without packaging and installation
$ ares-launch -H APP_DIR -d TARGET_DEVICE
Installing package D:\webOS_TV_SDK\CLI\lib\com.sdk.ares.hostedapp.ipk
Ares Hosted App is now running...

  • APP_DIR is the app's working directory.
  • To terminate, enter Ctrl + C.

The following is an example of a .reloadignore file.

appinfo.json
tests
**/tmp
**/*.png

  • appinfo.json - The appinfo.json file in the root directory of APP_DIR will be ignored.
  • tests - Directories and files under the tests directory in the root directory of APP_DIR will be ignored.
  • **/tmp - Any tmp directories and files under APP_DIR will be ignored.
  • **/*.png - Any files with the  .png extension under APP_DIR will be ignored.

With this option, however, you cannot test apps that include JS services.

About debugging a web app on VS Code Extension, see Debugging Web App on Vs Code Extension.

Testing on the Simulator

The ares-launch command with the --simulator option runs webOS TV Simulator of the specified version and tests the specified APP-DIR.

With the command, the location of the simulator is identified based on the environment variable, LG_WEBOS_TV_SDK_HOME, and the execution file of webOS TV Simulator, of the specified version by the --simulator option, is run.

For how to install and use Simulator, see Simulator Installation and Simulator Guide.

Example

The following is an example of running webOS TV 22 Simulator and testing APP_DIR using CLI.

$ ares-launch --simulator 22 APP_DIR
 
Finding simulator in /home/user/webOS_TV_SDK/Simulator
Launched webOS_TV_22_Simulator_1.0.0.appimage

 

Testing on a Local server

The ares-server command runs a web server for testing a local file. The web server will run on the given path. 

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 the default browser of your PC directly, use --open option as below:

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

 

Navigation