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.
When debugging Gadgets, I find the Elements, Scripts 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.
Last, but certainly not least, is the Console tab. Sometimes I go into the code for my Gadget and add
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!