Developing in Chrome

Introduction

new-chrome-logoDeveloping in Chrome requires knowledge to modify a few runtime settings and to get familiar with the Developer Tools.

Launching Chrome for CloudTV HTML5 Application Development

The default installation of Chrome does not have several features which will be required to develop an application and test in Chrome. Specifically, it lacks:

  • "Remote data access" – Applications are installed in the data center, so access to data is needed across domains in order to access your web server or servers, such as graph.facebook.com.

In order to enable remote data access in your CloudTV applications, copy your shortcut to Chrome and add one launch parameter:

Macintosh

The easiest way to run Google Chrome with --disable-web-security is to run the following DMG, which is an automator script. Make sure to COMMAND+Q (QUIT) Google Chrome before running. (NOTE: you should never run any application other than your's in this instance of Chrome as it will allow cross-domain requests)

Alternatively:

Create a new path to launch Google Chrome, identical to your current Chrome application launcher, but append the argument "--disable-web-security" to the argument list. To do this, open up Terminal and paste the following command. Make sure Google Chrome is not open, as this will need to be the only instance of Google Chrome running on your desktop at the time. This is the command:

nohup /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir > /dev/null &

Windows

  1. Run the BAT file to exit chrome and launch a new instance with --disable-web-security (NOTE: you should never run any application other than your's in this instance of Chrome as it will allow cross-domain requests)
  2. Or create the bat yourself, it is very short:
    taskkill /IM chrome.exe /F
    
    start chrome --disable-web-security --user-data-dir
    
    EXIT /B

Accessing the Developer Tools

Chrome offers a rich set of tools that aid in development of web pages and applications. Those familiar with the Firebug extension for Firefox will already know the benefits of having CSS, network inspector, and console tools available to you at run time. Chrome offers these features:

  • Resource and Network usage information – a list of requests for images/css/JavaScript/etc per domain as well as information on when and how long it took to load that network asset.
  • Script Access – ability to add/remove breakpoints and step through code, introspecting on the call stack, scope variables, and a large group of standard debug tools familiar to developers who have used Zend Studio or Visual Studio.
  • JavaScript Console – view variables sent to the console by applications, as well as execute arbitrary JavaSript at will.

The strength for a developer comes in not only one's ability to access information about a page, but also to manipulate and experiment with the DOM/CSS/JavaScript real-time. The following screenshot demonstrates how an application used console.log() or av.log.debug() if using the ActiveVideo Application Framework Libraries, to debug application data and information as stepping through logic in the application.

Google Chrome Developer Tools

To access the Developer Tools:

In Google Chrome:

  1. Click on the  settings icon.
    Google Chrome Settings
  2. Select "Tools" > "Developer Tools". 
    Accessing Google Chrome Developer Tools

 

  • Tuesday, 02 August 2011

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2017 Active Video Networks. All Rights Reserved