Over the past couple of weeks I've heard a lot of people complaining about JavaScript and it's lack of debugging/error checking abilities. Naturally, this intrigued me and made me wonder if this hatred of JavaScript was something that people outside of our class also shared. Upon some further research I came across quite a few places discussing different methods and tools to assist in the JavaScript coding process. Two tools particularly stood out to me during my reserach. Due to the amount of information regarding both of these tools, I'll explain a little bit about one here, then post the details on the other one in a future post.
NetBeans is a tool that handles all kinds of code. It reminds me of a program like Microsoft's Visual Studio, but it supports smaller languages as well like AJAX, JavaScript, PHP, and other Web languages. NetBeans can run on all the popular OS's, so downloading it isn't an issue; plus it's completely FREE! While NetBeans supports all kinds of technologies, including our infamous AJAX and PHP, the main thing I want to focus on is the ability it has to debug and check JavaScript. Beyond helping with errors, NetBeans is one of the first programs to incorporate JavaScript code completion into the package saving all kinds of time and allowing the focus to be on functionality of the code rather than memorization of the terms. Below is an example of a pop-up box that displays while entering some JS in order to offer suggested code like done in many popular programs (ie Dreamweaver) for HTML and CSS.
The debugging and real-time syntax and error checking is an even greater feature offered by NetBeans. By default, the JavaScript debugger is disabled in NetBeans. In order to enable the debugger, go to the Projects window, right-click your project, and choose Properties. In the Project Properties dialog box, select the Debug Category and select the "Debug Web Application (Client side JavaScript)" checkbox.
Now that the debugger is enabled, you can start debugging at any time by right-clicking on your Project again and choosing Debug, then following the prompts that appear. In Firefox, Firebug is also installed in order to handle the debugging. In order to read more about Firebug, see Colin's post about it from a few weeks ago. Debugging can be done either on a whole project or on individual files. If connected to the Internet, NetBeans can even debug JavaScript from URLs on the Web, which comes in handy on code you've already posted to the Web but might not have on your local disk. When ready to debug your file or project, simply right-click it and select Debug. Similar to Visual Studio and other programming IDE's, NetBeans displays a toolbar when in Debug mode that has buttons such as resume, pause, stop (finish session), step over, step into, step out, and run to cursor.
You can set breakpoints throughout your code if you want to increment through it stopping it at certain points. Overall, the debugger is extremely useful and powerful. By incorporating the debugger right into the output of NetBeans, you can see exactly what is wrong with your code and save a lot of time testing the live code then trying to find your errors if it doesn't work; debugging the code takes you right to the errors so you can fix them before they ever even go live! Along with debugging your code the other thing NetBeans will help with while coding your JavaScript is syntax errors. When you make a mistake in typing something NetBeans will place a squiggly red line under it like Microsoft Word and other popular applications do. It also uses other coloring themes to make your coding easier and more pleasant, not the least of which includes turning all global variables green so you know whether a variable you're working with was previously declared globally or if you declared just within that function. The power of this syntax checking is so immense because it not only checks for typos, but also has the ability to find portions that are technically valid but will provide undesired results. (Things like '=' vs. '==') All in all NetBeans is another excellent tool worth checking out!
Oct 28, 2009
Subscribe to:
Post Comments (Atom)
This comment has been removed by the author.
ReplyDeleteInteresting software, initially I thought netBeans was a glorified text editor, but when I went to their website it shows that it is a free IDE. Thanks for the find Matt
ReplyDeleteMatt, I have looked for these types of things but for what ever reason haven't managed to find them. This is another great tool to add to my toolbag which includes Notepadd++ and firebug. Thanks.
ReplyDeleteI have just started to learn java and always find information exactly as you post. I am really happy to see this article. Thank you so much for posting!
ReplyDeletetransmetteur fm
Great post Matt. Having limited knowledge of JavaScript, I think this would be very useful to try. Thanks!
ReplyDeleteHmm interesting tool. I never had a chance to try it, but I will now. Speaking of Java have you tried JGRASP, or BlueJ?
ReplyDeleteSince I am new to javascript as many of us are, it is very helpful to find and use tools can can aid in debugging the code. I plan to add this to my resources list. Thank you for the information and making things a little easier.
ReplyDelete