Javascript Debugging
November 18th, 2008Read More javascript
When creating Javascript, it can be useful to alert out the values of various strings or arrays. You can also use this to confirm if certain parts of loops or if statements are being reached. However - having loads of alert statements in your Javascript can be messy and time consuming to manage.
For this reason I use this Javascript debug function. I use a PHP variable $debug to control whether or not this Javascript debug function outputs anything or not. If enabled, it will create an alert with info on the variable, array or whatever that has been passed to it.
If the $debug PHP variable is not set to true, the dbug function simply returns as soon as it is called - does nothing basically.
Here is the Javascript function
-
// for debugging only
-
function dbug(arr,level) {
-
<?php
-
if(!$debug){
-
echo 'return;';
-
}
-
?>
-
var dumped_text = "";
-
if(!level) level = 0;
-
-
//The padding given at the beginning of the line.
-
var level_padding = "";
-
for(var j=0;j<level+1;j++) level_padding += " ";
-
if(typeof(arr) == 'object') { //Array/Hashes/Objects
-
for(var item in arr) {
-
var value = arr[item];
-
if(typeof(value) == 'object') { //If it is an array,
-
dumped_text += level_padding + "'" + item + "' ...\n";
-
dumped_text += dump(value,level+1);
-
} else {
-
dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
-
}
-
}
-
} else { //Stings/Chars/Numbers etc.
-
dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
-
}
-
alert(dumped_text);
-
}
To use the function, first of all (assuming you are using PHP) you need to declare the $debug variable at the top of your script and set it to true:
-
<?php
-
$debug = true;
Then in your Javascript simply use dbug(var) whenever you want something outputted.
For example:
-
//Calling the function...
-
function init() {
-
var arra = new Array("Hloo",'s',23,23.1,"Hello World");
-
var assoc = {
-
"val" : "New",
-
"number" : 14,
-
"theting" : arra
-
};
-
-
dbug(assoc);
-
}
This was adapted from the Dump function available here
