webOS Studio - VS Code Extension

webOS Studio is an Microsoft Visual Studio Code (VS Code) extension for webOS. Using this extension, developers easily start to make webOS apps/services (web app, Enact app, JS service).

Key features are as follows:

• Manage the development lifecyle of webOS apps and services
• Install webOS SDKs from VS Code
• Suggest LS2 APIs as you type in VS Code
• Support real-time log viewer for webOS devices

How to Install

To install the extension, launch VS Code and do the following steps:

1. Navigate to View > Extensions.
2. Search for webOS Studio in the search bar.
3. Click the Install button.

Then you will see the icon in Activity Bar.

UI Overview

Click the icon to see the user interface of the extension:

Basic Usage

This section explains a typical development flow of webOS apps and services using this extension.

Adding Known Devices

1. Click the + button in the KNOWN DEVICE view.

   

2. Enter the name, IP, port, and username of your webOS device.

   

3. (Optional) Set the device as the default device. Actions that don’t specify the webOS device will be performed on the default device.

   

Creating an App/Service

First, let’s create an app for webOS device. Do one of the following:

• Click the + button in the APPS IN WORKSPACE view.
• Execute webOS: Create ProjectWizard in the Command Palette.

Then the Project Wizard window will be displayed.

First Screen

Second Screen

webos-service Library

webos-service library is a library for using webOS components on JS services or Enact apps. This library is for legacy webOS OSE devices (for version 1.x.x).

To use the library, do one of the following:

• Check the Yes button for Add webOS library.

  

• Install it in the APP IN WORKSPACE view.

  

Editing the Source Code

Now it’s time to implement your own features on the created apps or services.

Editing with Auto-Completion

webOS Studio supports a powerful content-assist feature called Auto-Completion. Auto-completion includes API suggestions and automatically completes method names, helping users implement webOS features more easily.

For more details about the auto-completion feature, see Auto-Completion.

Previewing with Auto Reload

While you editing an app, You can preview the app UI before installing it.

In the APPS IN WORKSPACE view,

1. Right-click the app.
2. Click Preview App.
3. The preview of the app is automatically launched on the IDE.

In the preview, you can modify the source codes and check the results instantly.

You can also change the resolution of the preview.

Packaging / Installing / Launching

Typical steps to install webOS apps are as follows:

1. Package the source code into an .ipk file.
2. Install the IPK file.
3. Launch the installed app.

The above three steps are triggered sequentially by clicking the Run App button in the APPS IN WORKSPACE view.

Then, enter the information about the app. If you use the default information, just press the Enter key.

You can uninstall the apps in the KNOWN DEVICE view.

Or You can uninstall the app manually using the appInstallService API or webOS CLI.

Debugging

You can debug apps or services that are installed on the known devices. Supported types are as follows:

• Web app
• Enact app
• JavaScript service

Prerequisites

• Apps or services are installed on webOS devices
  • The webOS devices or emulators should be registered as the known devices.
• (For inspector debugging) Chromium-based browser

Start a Debugging Session - App

1. Right-click an installed app.

2. Click Debug on.

3. Click inspector or VS Code.

   1. [inspector]

      Enter a path for the browser executable.

      

      Then the debugging session will be activated in the browser.

      

   2. [VS Code]

      The DEBUG CONSOLE panel will be activated automatically. In the panel, you can check the console messages from the app or service.

      

      In the debugging session, you can set breakpoints, check variables, callstack, etc.

      

Start a Debugging Session - Service

1. Right-click an installed service.

2. Click Debug on.

3. Click inspector or VS Code.

   1. [inspector]

      1. After clicking the inspector button, a URL for the debugging session will be displayed in the OUTPUT panel. Copy the URL.

         

      2. Open your browser and go to chrome://inspect. Configure the URL as follows:

         

         Note
         Microsoft Edge browser automatically redirects chrome://inspect to edge://inspect.

      3. Click inspect.

         

         This opens a new window for the debugging session.

         

   2. [VS Code]

      The DEBUG CONSOLE panel will be activated automatically.

      

Trouble Shooting Guide for Debugging

Q) The Run and Debug view is not opened

Click View > Open View... > Run and Debug.

Q) The debugging session is not launched

Close all running apps on the webOS device and re-try to click Debug on.

Q) (Very rare to happen) A notification says the debugging session is already activated

If you get this notification, even when all debug sessions are closed, restart the VS Code and try to start a debugging session again.

Running ESLint on the Enact App

ESLint statically analyzes files for potential errors (or warnings) and helps enforce a common coding style. For more information, check ESLint Configurations.

In the APPS IN WORKSPACE view,

1. Right-click the React app.
2. Click Run Lint.

The PROBLEMS panel shows the result messages.

To clean the Lint messages from the panel, click Clear Lint.

Other Features

Auto-Completion

Auto-completion suggests a list of available LS2 APIs based on the project’s API level.

Features

Key features are as follows:

• Providing auto-completion of API strings using the Tab key
• Listing available LS2 APIs (services, methods, and parameters)
• Providing descriptions for each LS2 API
• Providing links to API documentation webpages

How to Use

To use auto-completion, type one of the following trigger strings:

• luna://
• new LS2Request

luna://

To start the auto-completion feature, enter one of the following strings:

• luna://
• 'luna://'
• "luna://"

You can print the list of available services, methods, and parameters using the following trigger strings:

new LS2Request

Type new LS2Request to use Enact webos Library. Using Ctrl + Space, you can use the auto-completion.

Trouble Shooting Guide for Auto-Completion

Q) Auto-completing using the `Tab` key doesn't work

Check the Tab Completion setting is on.

Q) I entered the trigger strings, but it didn't show a list

To use auto-completion, .webosstudio.config file should be in the project root folder. This file contains information about the API level.

This file will be automatically generated if you generate a project using the Project Wizard. In case you don't have this file, generate the file as follows:

1. Type luna://.

   This invokes a notification to generate the config file. Click Yes.

   

2. Then a Quick Pick pop-up appears at the top of VS Code.

   Enter the API level you want.

   

3. The config file is generated in your project folder. You can check the API level in the config file.

   

   If the API level in the config file is not supported by the current profile, an error notification will be displayed. Currently supported API levels in the OSE profile are 20-25, 27-29, and 31. See also, API Levels

   

Package Manager

Package Manager manages SDKs for webOS app development. Users can install and uninstall SDKs with a simple click.

Prerequisites

To use the Package Manager, you have to prepare the followings:

1. Set a directory for the Package manager
2. (Only for emulator) Install required softwares

Setting a Directory

When the user runs webOS Studio for the first time, a pop-up for selecting a directory will show up. This directory stores configurations and downloaded files for the Package Manager.

To change the set directory, follow the below steps:

1. Change the directory name or delete the directory. (We recommend changing the directory name.)
2. Restart VS Code. Then the pop-up for selecting the directory will show up.

You can check the current set directory at the bottom of the Package Manager view.

(Optional) Installing Required Softwares

webOS OSE Emulator requires Emulator Launcher. Install it before use the emualtor feature.

Package Auto Update

From webOS Studio v2.1.0, the Package Manager automatically updates the package list.

Every time the VS Code launches (the webOS Studio extension launches), the extension checks if the newer version of SDKs exist. If the newer version exists, the list will be updated automatically.

This update is also reflected in the Package Manager component.

Trouble Shooting Guide for Package Manager

Q) Failed to install emulator SDKs

If you got a below error, you have to manually install VirtualBox 6.1.x and then try to install again.

Emulator Manager

You can manage webOS emulator (VirtualBox) images in VS Code. By default, any webOS emulator images installed in VirtualBox are listed in the EMULATOR MANAGER view.

Prerequisites

How to Manage Emulator Images

1. Click the + button in the EMULATOR MANAGER view.

   

2. Fill in the input form. For the other system requirements, refer to Emulator User Guide.

   

3. Click Add Instance and the created instance is listed in the EMULATOR MANAGER view.

   

4. Click the Run App button (triangle) to run the emulator. This action will launch a new VirtualBox window.

   

   To stop or close an emulator instance, close the running VirtualBox window.

IPK Analyzer

You can analyze the file size of the app or services in the IPK file.

1. Open the Command Palette (Ctrl + Shift + P) and type webOS: IPK Analyzer.

2. Click Import IPK.

3. Choose the IPK file to analyze. After the file is loaded, you can see the following screen:

   

4. Click the Compare IPK button to load another IPK. (For example, the older version of the original file)

   

   Each color means the following:

   • Red: Files or directories have the same name but different size.
   • Green: Files or directories exist on only one IPK.
   • None: Files or directories are the same.

Process Log

webOS Studio has many internal utility commands including ares-cli, enact-cli, and VirtualBox utility. In the OUTPUT panel, you can check the output logs of these commands. Developers might find out helpful information to debug their apps or services.

Trouble Shooting Guide for Process Log

Q) Log messages are broken

If you get broken log messages (see the below screenshot), use Unicode UTF-8 on your computer.

Log Viewer

The Log Viewer displays log messages of the webOS device.

Features

Key features are as follows:

• Displaying real-time log messages of the webOS device.
• Supporting multiple log formats (Journal log or PM log)
• Filtering and searching log messages
• Exporting/Importing the log messages

Displaying Real-Time Logs

To start the real-time logs, execute webOS: Start Log Viewer in the Command Palette (Ctrl + Shift + P).

Then the LOG VIEWER panel will be displayed on the bottom.

To visualize the priority of the log messages, the Log Viewer displays log messages in three colors: white, orange, and red.

• White (default): Normal log messages

  

• Orange: Warning messages

  

• Red: Emergency, alert, critical, and error log messages

  

Switching the Log format

If you want to switch the log format from PM log to Journal log, click the Switch to Journal log button as follows (vice versa):

This job will reboot the webOS device and take a few minutes.

Filtering and Seaching Logs

Each column provides the filter option. You can filter out log messages you don’t want to.

Especially on the Message column, you can combine keywords using OR and AND options. These options filter out log messages which don’t contain the keywords you entered.

To search log messages, enter a keyword to the search box.

Import and Export Logs

You can import or export logs as follows:

Resource Monitor

The Resource Monitor tracks and visualizes system and memory usage, CPU consumption, and so on. This enables developers to test their apps or services and identify resource consumption trends and patterns.

Default Dashboard

Developers can set the default dashboad for the Resource Monitor, which is called Provisioned Dashboard.

1. In the PACKAGE MANAGER view, click the icon to install the resource monitor.

   

2. To launch the Resource Monitor, do the one of the followings:

   • In the QUICK LAUNCHER view, click the Resource Monitoring.
   • Execute webOS OSE: Launch Resource Monitoring in the Command Palette.
   Note
   You can have multiple Resource Monitor tabs running at once.

   Then the resource monitor tab will be launched.

   

3. Go to your webOS device, stop the Resource Monitor running (if you’ve run it before.)

   luna-send -f -n 1 luna://com.webos.service.sdkagent/collector/stop '{}'
   

4. Connect the Resource Monitor using the following command. Replace <HOST_IP> into your computer’s IP address.

   luna-send -f -n 1 luna://com.webos.service.sdkagent/collector/setConfig '{"agent":{"flush_interval":"5s","interval":"5s"},"outputs.influxdb":{"urls": ["http://<HOST_IP>:8086"]}}'
   

5. Set up the dashboard.

   luna-send -f -n 1 luna://com.webos.service.sdkagent/collector/setConfig '{"webOS.webProcessSize":{"enabled":true}}'
   
   luna-send -f -n 1 luna://com.webos.service.sdkagent/collector/setConfig '{"webOS.processMonitoring":{"enabled":true,"process_name":["com.webos.app.home","com.webos.app.notification","com.webos.app.volume","com.webos.service.sdkagent"]}}'
   

6. Start the monitoring.

   luna-send -f -n 1 luna://com.webos.service.sdkagent/collector/restart '{}'
   

   Then the Resource Monitor shows the default dashboard as follows:

   

   Note
   The default (provisioned) dashboard appears only on the first tab. From the second tab, you’ll see Grafana’s default UI.

Add a New Dashboard

Grafana provides many user-made dashboards. These dashboards can be searched and imported using the Grafana UI.

1. Hover on the Dashboards menu and click Import.

   

2. Enter the ID of dashboards and click the Load button.
   Recommended IDs are 928, 5955, 2381.

   

3. Select the data source and click the Import button.

   

Trouble Shooting Guide for Resource Monitor

Q) I followed the guide above, but I don't see the dashboard.

Go to the Settings, check the webosose > Resource Monitoring: Provisioned Dashboard setting is on.

Q) My service is crashed, and not worked.

Restart the webOS device and follow the above steps again.

FAQs

Q. What are the different types of projects that can be created in the extension?

A. Supported types are as follows:

Type	Description
Basic Web App	Creates a sample HTML "hello world" app that has a standard webOS OSE file system.
Hosted Web App	Creates a sample HTML app with an example to show some external page in-app with standard webOS OSE file system.
Web App Info	A dummy web app, which contains only appinfo file to use with any already developed HTML app.
Basic Enact App	Creates an enact Sample app as per selected template.
JS Service	A simple JS service with a service file.
JS Service Info	A dummy service info directory, which is used for reference of standard service information.

Q. What is "Add webOS library", and when is it needed?

A.This feature adds webos-service library to your project. The webos-service library is to call LS2 APIs in the app/service. But we strongly recommend using WebOSServiceBridge API instead of webos-service library.

Q. I have not added any device in the KNOWN DEVICE view, yet I can see the device named emulator.

A. By default, emulator is added in the KNOWN DEVICE view. This emulator is running on the local system. If you an emulator instance is not already set up, go to the EMULATOR MANAGER view and add the emulator instance.

Q. Getting an error while packaging the app, when my folder path contains special characters.

A. Workspace path and name should not contain any escape or special characters, it can trigger errors on add, package, install operations.

Q. How to resolve errors in Notification Area?

A. A list of the errors:

Error	Description
ERROR! Failed to get the device list.	Some dependent packages are not available on the local system. To resolve this issue, install the packages either manually or by clicking Yes when prompted (if you previously closed the prompt without installing, click the refresh button in the KNOWN DEVICE view to get prompted again).
ERROR! Failed to list the applications installed on <device>	The device is not running.
ERROR! Failed to list the applications running on <device>	The device is not running.
ERROR! Please check IP address or port of <device>	The device is not reachable.
ERROR! Unable to find the Virtual Box	Update the environment path variable to point to the VirtualBox installation directory.
ERROR! Packaging App Failed. Details As follows: <errMsg>	Failed to package the app due to one of the following: Check the ID format. Only lowercase letters(a-z), digits(0-9), minus signs, and periods are allowed. Check the version format. It should be something like 1.0.0. Only a valid app can be packaged. Make sure the directory includes 'appinfo.json'. Some dependent resources (such as images, libraries, and modules) that are required for the project are missing. Add manually or through the npm command.