HOWTO: Debugging your charts with Chrome

Debugging your charts becomes an awful lot easier if you use a Javascript console. This is where you'll find error messages and its these messages that can help you to trace the location of an error. This page focuses on the developer tools built into Chrome, however each browser will have its own developer tools - eg Firebug for Mozilla Firefox.

1. The Chrome developer tools in undocked mode

The Chrome developer tools in undocked mode

When you first open the developer tools in Chrome (you can press CTRL+SHIFT+J to open the tools) they usually look like this - ie in undocked mode. You may prefer this as it gives you more space initially or you may find that showing them in docked mode is more convenient. The button for switching modes is highlighted.


2. The Chrome developer tools in docked mode

The Chrome developer tools in docked mode

Here the tools are docked so that they appear joined to the main browser window at the bottom. Using them this way means that any Javascript errors will appear in the console which will make debugging your charts much easier.


More information

This is a video from Google IO 2010 detailing the development tools. Remember that other browsers as well as Chrome have developer tools - so refer to their documentation for more details.