Debugging Web Apps

Version added 07-Mar-2018| Modified 10-Oct-2018

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

Web Inspector is based on Chrome DevTools. Refer to Google Developers for the detailed description of how to use Chrome DevTools. Note that older 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 a URL which you can use to open the app. Alternatively, 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 and Linux) or Command+C (in macOS) 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.