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!
