Why Bother Coding

Helping the utterly confused, one post at a time

Debugging Javascript Tips

September 24
by Carleton DiLeo 24. September 2010 23:06

Common Mistakes

When working with JavaScript there a many things (and I mean many) that may cause your code to not work as you intended. I have found that there are a few mistakes that people, including myself, seem to make more often. When you encounter an issue with your code, try running through this list of possible mistakes before moving on to other troubleshooting techniques. These common mistakes can end up costing you a lot of time when they are really easy to correct.

Misspelled object/function calls

Providing invalid spelling of a function or variable you wish to access can be quite easy since writing Javascript code does not come with the frills of sophisticated intellisense. It's a dynamic language after all. Look carefully at your method calls and object properties when you call them. Classic examples of this type of error is using document.getElementByID() while trying to fetch an element on the page instead of the correct function, document.getElementById(). Common symptoms of this error is null or undefined error messages on methods you know were written and elements you know exist.

Unfortunately the only way of avoiding these types of issues is careful naming of the functions and variables you create. Make sure you avoid names that people misspell often. Functions like startMaintenance() are easy to misspell and screw up. Also, watch your use of letter casing. Functions like getIDBadge() can often be written as getIdBadge(). Sometimes these names are unavoidable. If you did not author the code unfortunately you have no say over what names were used. Just make sure that if you come across an error in your code where a function or variable is undefined, double check that your spelling is correct. If your lucky you can save yourself a lot of time and a headache.

Forgot external JavaScript dependencies

When moving your JavaScript code into external files and working with third party JavaScript libraries, its easy to forget to include a file that your code is dependent on. This is especially true when dealing with libraries that have interdependency between files. If you find that you're receiving strange errors about null or undefined objects and functions you know you didn't write, make sure you double check you have included everything you need to run the code causing the error. Look over the documentation the third party library provides. If you have external files that you wrote yourself, make sure that there are no syntax errors in the code that is preventing them from being included.

Invalid references to page elements

Accessing the DOM can be a task that can cause great grief if you are not careful. There are a few mistakes that can be made while performing this action. If you find that your code keeps complaining that an element you are trying to access on the page is null even though you swear its there, make sure the id of the element you are using is correct. Remember that element id's are case sensitive so "johnsBlog" is not the same as "JohnsBlog". If you find that events that you are attaching to an element are not firing, invalid element id's may also be the issue. Another possibility to this issue is you may have accidentally used the name specified in the name or class attribute of the element thinking you were accessing the id. If you have to, use copy and paste to make sure you're using the correct value.

Avoiding Mistakes

Trying to avoid mistakes is hard with JavaScript because you don't have the ability to compile your code before you deploy it. Instead you are locked into a cycle of write, deploy, test that may turn into a seemingly never ending loop just to get things right. This means you need to be more careful when writing code because no one is there to hold your hand. Luckily there are a few tools that will help make your life easier.

JSLint

JSLint is a tool written by Douglas Crockford that evaluates the JavaScript you wrote and informs you of any issues it finds. Some of these issues are trivial like adding ; to the end of every statement to issues that could cause frustrating problems in less forgiving browsers such as Internet Explorer. You would be wise to run all your JavaScript through this program before deploying it or even running it for the first time. You will find that over time this tool will also make you a better programmer by teaching you the common mistakes to look for when writing your code. Just be warned, if you have never used JSLint before, it may hurt your feelings the first time you run it.

Firebug

Firebug is a godsend to the web developing community. If your not using this tool do yourself a favor and go download and learn how to use it. It will save you time and frustration when trying to debug your Javascript code. Teaching you how to use this tool is out of the scope of this article. I will try to address some techniques of using this tool at a later time. You can always visit the firebug website to learn more.

Code Reviews

When you're developing, sometimes it's easy to get tunnel vision when it comes to your code. Code reviews are a good way to find mistakes early and keep your teams code base in-sync. Performing code reviews can be as easy as having your teammate glance at your code for obvious errors and formatting to being as detailed as having a standard checklist of common issues and team best practices that must be used for each review. There are some good resources out there for understanding the code review process. Steve McConnell's book Software Project Survival Guide has a good section on reviews. His site has a short summary of the code review process you can find here. You need to register to get the pdf but its worth it.

Summary

I hope some of these tips will help you through the tough times of writing JavaScript. The language can be really fun to write in if you don't cut corners and take your time. Over time as your code matures you will be amazed by the things that are possible. Until that time just keep trying.

Tags: , ,

JavaScript

Comments are closed