Debugging your Smart TV app: weinre

476

Learn how to debug your Smart TV applications using free tools available in the web like weinre! the best way to debug Smart TV applications for the Samsung Orsay platform.

Debugging-Smarttv-app-weinre-home

We already talked a bit about JSConsole and Console.Re, both remote consoles that allow us to simply display the log information coming from our app. Nevertheless, there is a tool that surpasses them both, it requires quite a bit more configuration, however once configuration is completed, you will see that it is a big step forward. The tool we are talking about is called weinre and is not just a javascript console, it is a WEb INspector REmote. It will let us watch the output log from our app, inject new code into our app, check HTML markup and review our CSS rules all within a secure local server!

Debugging-Smarttv-app-weinre-interface

The GUI we will be working with is very similar to those of web-kit based browsers

DISCLAIMER: This tutorial is for those who are still developing on the current SmartTV platform (codename Orsay).

Installation

  1. Download node.js, if you already have it in your machine skip this step.
  2. To globally install weinre, type the next commands in your terminal or command line:
npm -g install weinre

Running weinre

  1. Just type in your command line or terminal:
    weinre
    
  2. Weinre will start a server at http://localhost:8080
  3. Open a browser and go to http://localhost:8080

Stopping weinre

To stop the server you can always use Ctrl+c in the Command Line.

Running from a specific address

It is recommended though that you specifically tell weinre your local ip address (my local ip address is 105.102.37.12 so I will use that).

  1. To achieve this add the parameter boundHost when executing weinre:
    weinre --boundHost 105.102.37.12
    
  2. Weinre will start a server at http://105.102.37.12:8080
  3. Open a browser and go to http://105.102.37.12:8080

 If you have port 8080 blocked

Alternatively if you have the port 8080 blocked you may use a different one:

  1. Type in the the weirne command along with the http port you want to use, example:
    weinre --boundHost 105.102.37.12 -httpPort 8086
    
  2. Weinre will start the server. In this case at http://105.102.37.12:8086
  3. Open a browser and go to http://105.102.37.12:8086

Ultimately, when you open your browser you should see something like this:

Debugging-Smarttv-app-weinre-works
Your weinre server is alive!

Now we just need to tell our app to comunicate to our server. We will copy the <script> tag in the Target Script section.

I will paste it in the index.html of my app:

<!DOCTYPE html>
<html>
 <head>
  <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
 </head>
 <body>
  <h1>Hello! anyone there?</h1>
 </body>
</html>

Now load your app either from a web-browser, the SmartTV emulator or a TV itself, your app will make a request to your local server so it can load the target-script-min.js file. You may open any number of instances in any number of devices you wish. I opened 3 browser instances that had the target script, go to the Access Point section to visualize a list of the current targets (select one of them):

Debugging-Smarttv-app-weinre-targets

3 apps running on different windows, all target of the weinre script

Go to the Elements tab to inspect markup in your app:

Debugging-Smarttv-app-weinre-WebInspector_Elements

Inspect elements in markup, modify its attributes or CSS properties remotely!

Go to the Console tab to receive log information from your app or type in commands to test that everything is working:

Debugging-Smarttv-app-weinre-Console

Go ahead and type a log command!

And thats it! Now you should be able to debug your SmartTV (Orsay) apps on remote devices. Way better than just blindly loading and testing your app into a device.

NO COMMENTS

LEAVE A REPLY

seven + twelve =