Debug your web app with VS Code

If you have LG webOS devices like webOS TV, you can dive into developing web apps running on the device.

As described in this site, you can download SDK tools from the lg developer site.
- tv: http://developer.lge.com/webOSTV/

The SDK tools has several elements like emulator based on virtualbox, IDE based on eclipse and CLI tools.

In order to develop the apps on the real tv, not emulator, you must install “Developer Mode” app from the LG Contents Store from the TV menu.

With CLI tools on the Host PC, you can add the device via the command below. (Type “Device Name”,“IP Address” and just enter the others as default)

$ ares-setup-device (enter)

Turn on the “Developer Mode App” on the TV and turn on the “Dev Mode” and “Key Server” then try this command below.

$ ares-novacom -d DEVICE_NAME -k

It’s done. Now you can connect to the tv from the host pc.

You can refer the “developer site” how to package web apps and install it on the tv.

Now I assume that you already installed an app on the tv.
It provides the web inspector (dev tool). This command print the url to open the web inspector remotely.

$ ares-inspect -d DEVICE_NAME com.domain.app
Application Debugging — http://url:port/xxx

When you open the url in the browser, it will pull the web inspector source from the device. It’s same the the devtool of the chrome.

But you know that.. the Host PC’s land is changing rapidly. But the embedded land is slower. So it brought the incomparability between the web inspector and host pc’s browser even though the debug protocol is same.
(i.e. Some non-standard attributes has been removed from the recent chrome browser, but the web-inspector code could use it because the web-inspector code is in the webOS device.)

To get over this issue, you can use another Chrome Debugging Protocol Clients.

One choice of them is VS-Code with Chrome Debugger Extension.

You can make “launch.json” like similar one below.

{
“name”: “Attach to Chrome, with sourcemaps”,
“type”: “chrome”,
“request”: “attach”,
“port”: 9222,
“sourceMaps”: true,
“webRoot”: “${workspaceRoot}”
},
{
“name”: “Attach to Chrome, without sourcemaps”,
“type”: “chrome”,
“request”: “attach”,
“port”: 9222,
“sourceMaps”: false,
“webRoot”: “${workspaceRoot}”
}

The following CLI commands will launch the installed app and start port-forwarding.

$ ares-launch -d DEVICE_NAME com.domain.app
$ ares-novacom -d DEVICE_NAME -f -p 9998:9222

Just leave the running ares-novacom command.

Now you can use “Chrome Debugger” in VS-Code to debug an web app running on the webOS TV.

Debug an web app running on the webOS TV in VS-Code via ares-novacom

Thanks VS-Code.


updated: 2016/11/15.

The reason why I use ares-novacom is to make a tunnel between the host pc and tv for the case the inspector port is bound in ‘localhost’ only.

But if the remote inspector port is opened allowing the connections from the outside, you don’t have to use ares-novacom for this case.
Just add “address” property in the launch.json.

{
“name”: “Attach to Chrome, with sourcemaps”,
“type”: “chrome”,
“request”: “attach”,
“port”: 9333,
“sourceMaps”: true,
“address”: “192.168.0.23”,
“webRoot”: “${workspaceRoot}”
},
{
“name”: “Attach to Chrome, without sourcemaps”,
“type”: “chrome”,
“request”: “attach”,
“port”: 9998,
“address”: “192.168.0.23”,
“sourceMaps”: false,
“webRoot”: “${workspaceRoot}”
}