HOWTO: Debug your charts
- The Google Chrome developer tools in undocked mode
- The Google Chrome developer tools in docked mode
- More information
- Debug functions in RGraph
Debugging your charts becomes an awful lot easier if you use a javascript
console. This is where you'll find error messages
and it's these messages that can help you to trace the location of an error.
This page focuses on the developer tools built into
Google Chrome, however, each browser has its own set of developer tools.
for Mozilla Firefox.
The Google Chrome developer tools in undocked mode
When you first open the developer tools in Google
Chrome (you can press CTRL+SHIFT+J
to open
the tools) they'll probably appear 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 buttons for switching modes are under the three
dots menu in the top right of the window.
The Google Chrome developer tools in docked mode
Here the tools are docked so that they appear joined to the main
browser window at the bottom (usually). 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 an old video from Google IO 2010 detailing the development tools. Remember that other browsers as well as Google Chrome have developer tools - so refer to their documentation for more details.
The debug functions in RGraph
Some functions that you may find very useful when you're debugging
your charts are the $c()
$a()
$p()
and $d()
functions. The $a()
function is just
an alias for the standard alert
function and the
$p()
function is similar but goes further in that it attempts
to "pretty print" the structure of whatever you pass it
and also gives you type information. The $c()
function is an
alias for the console.log
function and the $d()
function opens a debug window and logs the message to it whilst not blocking
execution like the alert
function does. If you need to find
out what a variable consists of then this is probably
the function you want (or the standard $c()
function).