Developer Tips & Tricks - Debugging Your Gadgets

November 16, 2011

Let's face it. The Gadgets that you build are not likely to work correctly the first time you try to run them. Perhaps you've used improper syntax or referenced the wrong variable. In order to find and fix any problems, we need a good debugging tool in our Developer toolkit. The tools that I use most when debugging are the Chrome Developer Tools.

The Chrome Developer tools are built right in to the Google Chrome browser, and since we recommend using Google Chrome with our open source digital signage software, you're already set! My favorite (and fastest) way of accessing the Developer tools are to right-click on any element, then choose Inspect Element from the menu. You can also get there by clicking on the wrench icon that is located top-right in your browser toolbar, and then selecting Tools -> Developer Tools.

Get started with Rise Vision

When debugging Gadgets, I find the ElementsScripts and Console tabs the most useful. In Elements, you can navigate all of the elements in your Gadget, or in any other Gadget or content in your Presentation. If you click on an element in this tab, over in the right-hand sidebar you will see all of the CSS styles that have been applied to it. If something doesn't look quite right with my Gadget's CSS, I often edit it right here in the browser, and then make the same changes to my Gadget once I have everything looking as it should. I also find the Metrics section of the sidebar to be helpful when I need to know the exact dimensions of an element.


The Scripts tab is fantastic for debugging your Javascript. All you have to do is select the Javascript file that you want to debug from the drop-down menu at the top. But what if your Javascript isn't separate from the Gadget's XML? In that case, you will have to look in the /gadgets section of the drop-down. As you mouse over each file, a tooltip will appear and you should be able to identify if this is the Gadget you're looking for by scanning the URL in that tooltip. Once selected, your Gadget's code will appear at the bottom of this file, so you will have to scroll down to see it. Either way, from here you can set breakpoints, pause, resume or step through your code.


Last, but certainly not least, is the Console tab. Sometimes I go into the code for my Gadget and add console.log commands to display values that I am interested directly in the Console tab. This tab will also show any errors that may be relevant to your Gadget. The file in which the error occurred is shown on the right. However, if your Javascript code is embedded in the Gadget's XML, you will see ifr as the file name. It will be more difficult to distinguish at-a-glance if the error occurred in your Gadget or in a different Gadget unless you click through to see the error. This is one of the reasons we recommend having separate files for your Javascript instead of keeping it inside of the XML.



I hope that you find these debugging tips helpful the next time you are left scratching your head as to why your Gadget is not working!