Debugging Web App

Version added 07-Mar-2018| Modified 12-Apr-2018

You can use the Web Inspector to debugg web apps by monitoring the run-time status of the web app that is running on a target device. The Web Inspector allows you to control JavaScript execution, inspect the CSS and the layout of HTML pages, and monitor the usage of resources. 

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

 

Launching the Web Inspector

To launch the Web Inspector on a webOS OSE device , you must execute the ares-inspect command while the web app is running. For detailed information on the command, see Command Line Interface.

General Usage:

ares-inspect --device TARGET_DEVICE --app APP_ID --open

This loads the Web Inspector in your default browser as shown in the following screenshot:

Web Inspector works only in Blink-based web browsers (example: Chrome and Opera). If another browser (example: Safari or Internet Explorer) is set as your default web browser, you must re-open the inspector page in a Blink-based web browser.

Web_Inspector_Screen.png

 

Testing a Local Web App

The ares-server command can run a web server based on a given app directory. A web browser has some restrictions related to security policy, on accessing local files (same-origin policy). For this reason, this command provides a simple web server to bypass the security policy of browsers. For detailed information on the command, see Command Line Interface.

To start the web server on your app directory, execute the following command:

ares-server ./sampleApp

Local server running on http://localhost:7496

This command starts the web server and gives an URL using which you can open the app. Alternately, if you want the command to directly open the URL on the default browser, execute the following command:

ares-server ./sampleApp --open

To terminate the web server, use Control-C (in Windows, Linux) or Command-C (in Mac OS) on prompt.

Except as noted, this content is licensed under Creative Commons Attribution 4.0 and sample code is licensed under Apache License 2.0.