Debugging your Smart TV app: JSConsole

249

Learn how to debug your Smart TV applications using free tools available in the web like JSConsole! an easy and fast solution.

 

There is little to no support for debugging your apps on the current Smart TV platform (codename Orsay). Sure you could use the official Smart TV emulator to display the current state of your app, but that is troublesome and slow.

Debugging-Smarttv-app-JSConsole-emulator
Using alerts to display the current status of your app should not be an option.
Whether you’re using the Smart TV emulator or a web browser to manage the development of your app, at one point you’ll want to do conclusive testing on the actual TV set. The problem lies when you start noticing that the code you already wrote and tested doesn’t behave the way you expected it to on the Samsung device but still works with everything else! What then? The TV does not have a console, and you will probably want to avoid printing the results on screen.
A solution would be to use a remote console to display all the messages your app is displaying. With jsconsole, remote debugging becomes simple and straightforward to use. This is how it’s done:
Navigate to jsconsole.com. You will see the following screen:

 

Debugging-Smarttv-app-JSConsole-welcome

The command line is located at the very top where you will be able to type simple commands (load, listen, clear, history, about). To start a remote debugging session, type listen?? on the command line:

Debugging-Smarttv-app-JSConsole-listen

After doing so, jsconsole will generate a <script> tag:

Debugging-Smarttv-app-JSConsole-listen_resultThe following script tag should be copied and pasted to your main page (usually to index.html):

<!DOCTYPE html>
<html>
    <head>
        <script src="http://jsconsole.com/remote.js?4074218D-E58C-41E6-819B-FCAC2FDF3E7D"></script>
    </head>
    <body>
        <h1>Hello! anyone there?</h1>
    </body>
</html>

That’s all there’s to it! Now you can launch your app on the browser, Smart TV emulator or the TV device to see results:

Debugging-Smarttv-app-JSConsole-results

Best of all, you no longer have to use the dreadful alert function to display the information you want. Why is that? Well, JSConsole inserts code into your project and overwrites native JavaScript functions like console.log which is how this function is intended to work on the TV. The downside would be that anyone with access to jsconsole and your ID can easily access your app and tinker with the native instructions that might lead to unexpected behavior. So remember, after testing, always remove the tag generated by jsconsole so that it doesn’t go into the production code.

In the next tutorials, we will talk a bit about console.re which prevents this issue.

Reference

NO COMMENTS

LEAVE A REPLY

three × 2 =