<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> Q & A
<troubleshooting>
  spacerspacer

JavaScript Troubleshooting

Because browsers are designed to output as clean a page as possible to the user, most browsers are designed to ignore JavaScript errors by default!

While this is not such a bad thing, (ever see an error popup every time you mouse over an incorrectly built rollover?) it can make our jobs as developers more difficult.

The whole process of looking for errors and correcting them has been called troubleshooting, or debugging. This involves skills and tactics that grow over time. Don't forget to step away from the computer for a few minutes, as this is amazingly helpful when trying to recognize errors in your own code!

Case Sensitive, and Syntactically Perfect

Because JavaScript is case sensitive, and requires syntactic perfection it is easy to make typographical mistakes.

When using document.write, for example, a capital "D" can create an error:

Document.write("blah");

The browser is looking for the "document" object, and doesn't recognize a "Document" object.

Watch the scope of your Variables & Functions!

JS runs script in sequence down a page, similar to HTML. If you reference a function, variable or object not yet created, you will get an error, naming the unknown item, and the line number on which it is referenced! Be sure the item is available (in scope) at that point in the script.

Sometimes the line number of the error ends up at the bottom of the page!?! How could that be? Perhaps you opened 2 curly braces instead of shutting one of them? (The script will continue looking for the match!)

Below are some tactics to keep in mind while troubleshooting JS:

Troubleshooting Tactics

  1. Use the JavaScript (Error) Console ( or the javascript: command) to locate script and syntax errors
  2. View Rendered Source (Output Source) to identify improperly constructed HTML/CSS
  3. Turn on IE's Script Debugging to view IE only errors
  4. Use the alert() function to halt operation and display the current contents of variables
  5. Double check syntax & object references with a JS book or website
  6. Use the typeof Operator to identify the type of data in your variables
  7. Check Similar Scripts (on the internet or in a book) to Check For a Logic Error
  8. Comment out damaged areas of code, or work with small bits to troubleshoot
  9. Use a JavaScript Debugging Program such as Firebug for viewing & editing JS and the DOM
  10. Use the window.onerror event to create a Error Handler Include File


Use the Firefox/Netscape/Mozilla JavaScript Error Console

Type, "javascript:" (without the quotes) into the address bar of a Firefox/Netscape/Mozilla browser. Out will pop the JavaScript console. Better yet, select Tools >> Error Console. Be sure to choose the "All" option to view all messages, warnings, and errors. Clear the console after each viewing to be sure you're seeing fresh info.

The Error Console will identify CSS errors and JS errors and will even display the line and exact character where the error occurs! If you double click on the link in the Error Console window, you are taken to the exact line in the source.

In class we set up the Error Console at the bottom of the page, and keep it visible as we develop. Now you can even install a plugin to keep the window open at all times: docked JS Console


View Rendered Source

"Rendered Source" refers to page source as seen after having been loaded in the browser, namely, the HTML & CSS generated by JavaScript. If your document contains "document.write('blah')", the Rendered Source View will display the page source along with the output (result) of that statement, and place it in the location it has been written to (below the body tag or in a table, etc.).

Here is an entire page dedicated to DOM Inspection, which includes several tools for viewing the rendered source in Firefox.

To view rendered source with IE see View Rendered Source For IE. Another tool that allows you to view the rendered source in IE is Instant Source. This one however is not free.

One more way to view the rendered source. Add the following line of code as a "favorite" or "bookmark":

javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;

When you click on this "bookmark" you will see the rendered HTML of the previous page. Here is an include file that you can use while testing, to view the rendered source, as you work with the DOM: viewRendered.js

In class we'll start to work with JavaScript templates designed to support troubleshooting JS. In a later version we'll work with the DOM and we'll use a version of viewRendered.js to help us see how JavaScript has altered our page in memory. Lastly we'll use a version of JS templates to help us develop jQuery applications.


Turn on IE's Script Debugging

To have IE alert you to a script error, go to Tools > Internet Options and select the Advanced tab. Under the Browsing heading is an option which says, "Display a notification about every script error". If that option is checked, uncheck it. Now you will not only get the yellow "warning" sign in the bottom left corner of the window in IE, but you will get a popup message for every JS error viewed on the page, in real time!

If the error only exists in IE, this is the only way to see it! Remember not all browsers will recognize an error in the same way!

If you do not have a script debugger for IE already (it comes with Visual Studio and other Microsoft programs) use this: Microsoft Script Debugger


JavaScript Debugging Programs

It's difficult to view and edit the DOM & CSS of a document by viewing code. Luckily there is a Firefox plugin that is an excellent tool for viewing the DOM document, the CSS, debug the JS code on a page and even the view transmissions behind the scene produced by AJAX calls. Download and install the Firefox plugin Firebug. View a video tutorial on Firebug JavaScript Debugging

Another great tool for Firefox is the web developer toolbar. What this tool adds (which is difficult in Firebug) is the ability to make changes to the code live (especially CSS) and save the changes.

For big jobs, you may want to consider using JSUnit which is a Java style debugging program. There is also an online debugger we can use called jslint. Another option people use is a Firefox plugin named Venkman.


The alert() Function

There are times that your JavaScript does not output what you expect. If so, it is quite possible there is a syntax or logical error in your JS, that you can't see when the page is loaded.

To view the operation of your JS code the alert() function is your first option, because you can output the current contents of a variable inside the code, thus:

var myVar = "blah";
alert("myVar currently contains: " + myVar);

If necessary, you can place SEVERAL alerts, or set up elaborate alerts that gather more than one variable, possibly even in more than one place in the code:

var myVar = "blah";
var anotherVar = "bleh";
alert("BEFORE myVar: " + myVar + "\n" + "anotherVar: " + anotherVar);
myVar += anotherVar;
alert("AFTER myVar: " + myVar + "\n" + "anotherVar: " + anotherVar);

Note that in the above code, the 2 alerts show the same info, but appear in 2 different places, therefore showing the contents of the 2 variables involved both before and after the concatenation operation that takes place between them.


Check Syntax

Every developer (myself included) has spent hours or days wrestling with a seemingly insumountable coding problem, only to find out what was going on was a simple syntax error. Always check the grammar of your objects, properties and methods!


Typeof Function

The typeof() operator is useful for determining the type of data with which you are working.

JavaScript is considered a "loosely typed" and "late binding" language. That means JS will attempt to determine the type of variable by the context in which you use it! Also, JS will switch variable types based on the context in which you use the variable!

The best example is if I try to add 2 numbers, but put quotes around one of them:

myTotal = '2' + 2;

Since the plus sign (operator) is both concatentation (connection) of strings, and the operator for addition, JS sees a string and a number, and changes the number to an addtional string, making myTotal become the string '22' instead of the number 4!

We can determine the "type" of variable that JS currently is using in an alert box:

alert("myTotal is currently type: " + typeof(myTotal);

This will return the info (in the case of our concatention example, '22'):

myTotal is currently type: String

Likewise, we can change the "type" of variable. Say we have the previous string '22', and we know it is a number, we may want to change it back!

Here is info on JS type conversion and advanced JS 2.0 data types


Error Handling Include File

The window.onerror event is triggered by the first error on a page, for most browsers. We can short-circuit the default behavior, and place our own code to run in it’s place. We can capture the error via the onerror event handler, and assign an anonymous function to it:

window.onerror = function (err, file, line) {
alert('JavaScript Error: ' + err + '\n' +
'In file: ' + file + '\n' +
'At line: ' + line);
return true;
}

The advantage of using this technique is we can capture all errors from several browsers, not just Firefox. We pop up an alert when we get an error, which identifies the line number and error text. We can decide to place error handling code in separate file, so we’ll be able to use this capability in many files at once:

The above demonstrates an include file that can switch between 3 error handling states, "alert", "hide" and "default":

  1. alert: Cross browser 'alerts' are generated for each error
  2. hide: All errors are hidden, meaning they will not intrude on the user or even be available to the error console
  3. default: Passes error handling back to the original error handler, so the error console in Firefox would take over it's own error handling.

When we place this code into an include file:

<script type="text/javascript" src="onerror.js"></script>

The advantages of using this file is it’s cross browser (no error console in the current version of IE) and errors can be turned on and off for an entire set of files at one time.

Once we are done troubleshooting, we can leave the reporting to ‘default’ which hides all errors for the current page.

To change the above code across all pages that use it, we merely change the value of the variable ‘errors’:

var errors = "hide";

If we don’t want any report, we set the value of errors to an empty string (or 'default'):

var errors = "";

window.onerror gaining wider support: As of June 2011 it looks like more browsers are improving support for the useful window.onerror property: Modern Debugging Tips & Tricks

 

   
Print this Page  

2000- <%=yere%> newMANIC INC, All rights reserved