Debugging your Smart TV app: Console.Re

282

Learn how to debug your Smart TV applications using free tools available in the web like Console.Re! another easy and fast solution for development. 

Debugging-Smarttv-app-Console.Re-page

In the last post of this series, we talked about JSConsole, an easy to use remote console that has some drawbacks. One of them being that it rewrites the native console commands. Fortunately, Console.Re exist and circumvents the issue.

Navigate to Console.Re and one of the first things you will notice is a log, where you will find the Channel Key:

Debugging-Smarttv-app-Console.Re-ChannelKey

Click on this key to generate a new random key:

Debugging-Smarttv-app-Console.Re-GenerateKey

You will always use this Channel Key to connect your app with
Console.Re.

You may connect to it by using an html script tag or inserting javascript code into your app.

HTML Script Tag

Just copy the following <script> tag into your index.html file, remember to set the data-channel property to equal your Channel Key:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://console.re/connector.js" data-channel="c26a-37b8-854d" id="consolerescript"></script>
    </head>
    <body>
        <h1>Hello! anyone there?</h1>
    </body>
</html>

Javascript Code

If you don’t have access to the head tag in your app you may use a script to load it:

var consolere = {
 channel: 'c26a-37b8-854d',
 api: 'http//console.re/connector.js',
 ready: function (c) {
  var d = document,
   s = d.createElement('script'),
   l;
   
  s.src = this.api;
  s.id = 'consolerescript';
  s.onreadystatechange = s.onload = function () {
   if (!l) {
    c();
   }
   l = true;
  };
  d.getElementsByTagName ( 'head') [0] .appendChild (s);
 }
};

consolere.ready({ console.re.log('remote log test'); });

Both the html script tag and javascript code do almost the same thing. They extend (but do not overwrite) the console prototype and add functions like console.re.log, which is a mirror of console.log.

One drawback that console.re has against jsconsole, is that the former is just an output console. That means there’s no input. For example, you wanted to output the value of a global variable inside your app. You would need to output it from the app itself, not from the console.re client. This is not that bad, no one will insert new javascript code into our app! (At least from the console.re client).

In the next installment of these micro-tutorials we will talk a bit about weinre. A tool that will let us run a small local server with a console on it! It has an input and output capabilities, and comes with a web inspector!

Reference

http://console.re/

NO COMMENTS

LEAVE A REPLY

11 + 10 =