Basic JavaScript Debugging with Firebug

A lot of my posts have been JavaScript heavy and I get a lot of questions from readers trying to adapt the code. The most frequent problems are with errors in the JavaScript syntax. Unlike Apex and Visualforce markup, you can save pages with embedded JavaScript with syntax errors and have no save errors. It is then maddening when you try to view your fresh new page and nothing happens. The JavaScript fails silently in the background and you have no idea what happened. This is when I turn to one of the developer tools such as the one built into Chrome or my personal favorite, Firebug.

To use Firebug, you first need Firefox installed. If you don’t have it, go get it now: http://www.mozilla.org/en-US/firefox/new/. I’ll wait. OK, next you need to install Firebug: http://getfirebug.com/. There are a million sites you can use to learn about Firebug, so I’ll just go over the basics. In the upper right of Firefox, you should a little bug. If it is gray, then Firebug isn’t active for the page; just click on the bug to give it some color and make it active. A panel will probably open at the bottom of your browser. This is the console and where you can see all the messages.

Now let’s debug some code! Here is a little Visualforce page that will cause you some problems:

[code]
<apex:page >
<script src="/soap/ajax/19.0/connection.js" type="text/javascript" />

<script type = "text/javascript">
function tryConsole() {
console.log("Link clicked");
sforce.connection.sessionId = ‘{!$Api.Session_ID}’;
var result = sforce.connection.query("Select id, name" +
"from Account limit 1");
var it = new sforce.QueryResultIterator(result);
while(itt.hasNext()) {
var record = it.next();
console.log(record);
}
}
</script>
<a href="javascript:tryConsole()">click here</a>
</apex:page>

[/code]

Make a new Visualforce page and copy the code above into it. When you click the “click here” link, the tryConsole JavaScript function will run. Give it a try so you can look at the Firebug console. It should look something like this:

So what happened? First it logged a message to the console using the code console.log(“Link clicked”). This is more preferable to doing an alert with a message in it because it doesn’t interrupt the flow of the page. Then we see the big whammy. There was something wrong with my SOQL query. There was a malformed query because I’m concatenating two strings together and forgot to leave a space between the two strings. I can see the error message right in the console and make some changes to the code to fix it. To fix this problem, just add a space between name and the closing double quote. Make the change, save the page and try clicking on the link again.

Oops, we still have an error:

This time, it looks like a typo in the code. The variable itt isn’t defined. Notice that there is a link in the console that takes you directly to the offending line of JavaScript. We can see that the variable is actually defined as it, so let’s change the code to say “while(it.hasNext())” and save the page again. Third time’s the charm – let’s try clicking the link one more time and taking a look at the console:

Ah, much better. Now we can see that the console is showing us the record that was selected by the SOQL. This is because of the line of code “console.log(record)”. It allows us to inspect the values and see if they are what we expect and could help us with other trouble shooting.

This is by no means an exhaustive tutorial on debugging JavaScript, but I hope it gets you on your way to finding errors and squashing bugs!