2.2 Debugging Javascript with Chrome

Debugging can be one of the most frustrating tasks for any programmer. Did you miss a semi-colon? Did you forget to close a squiggly mark? Luckily, there are some tools available that allows you to pinpoint the location of potential errors in your code. Keep in mind that all debugging tools are not perfect. While they may be able to find some errors, they may not always find all errors. Yes, nothing is perfect… even in the debugging world.

Chrome

There are two major debugging tools. One is called Firebug, which is an extension for Firefox. The other one is called Developer Tools, which comes built into Chrome. Since both tools operate in basically the same way, we will focus our debugging efforts to the Chrome Developer Tools since it comes built into the browser.

  1. Open Chrome
  2. go to your menu icon (the one that looks like a wrench, top right), select tools, and then Developer Tools

    chrome developer tools

Now that you have activated the tool, you should see the developer window docked to the bottom half of your browser (or it may have popped up as its own window). Let’s examine this window.  Notice the tabs on top, and click on the “Console” icon.

chrome developer tools

chrome developer tools

If your site has an error, you will notice it listed with red text.  You will also notice that it provides you with the exact location of the error to the right.  Clicking on the file name will show you the exact location of the error:

js error example

js error example

In this example, it tells me that “createMarker is not defined”.  In other words, I am calling a function that has not been defined.  Oh that’s right!  Although I did create this function, I did so using a namespace!  So I must change the function name to “yoh.createMarker”.  Doing so got rid of the error.

Using Trace

Sometimes, you may want to display a message or variable in order to trace and debug your workflow. The javascript alert function is the most popular function for this purpose, and it can be called by simply doing this:

Of course, you can change the ‘hello there’ message to something more meaningful, like:

Notice the syntax. Whatever is in single quotes will appear as text, and you can concatenate additional content in the alert box with a plus (+) sign.

However, using the alert function can be obtrusive. You may prefer to use the following trace function that allows you to see the message in the debug console, rather than through an alert popup box. To use the trace function, make sure to add the following code to your javascript:

Then, you can access it exactly the same way you would with the alert function like this:

Instead of showing up in an alert box, the message will display in the debug console window.

Leave a Reply