If you are starting off with writing some JavaScript, the first step is to choose an IDE (Integrated Development Environment). An IDE typically includes a Compiler, Code Editor (with/without Intellisense) and a Debugger. There are tons of additional features that almost every IDE now includes but these are the basic components. Let’s start with a list of possible IDEs you can use for writingJavaScript and debugging them.
1. Visual Studio 2010 with Visual Web Developer (Windows)
If you’re already writing your code in Visual Studio then this would be an ideal option. Visual Web Developer does not come by default in the VS 2010 installation so you will have to add it separately. To start off with, you can download and install the Express edition (free) of Visual Web Developer from here. Not only can you write and debug JS in VWD 2010 Express but you can also write RIA (Rich Internet Applications), WPF (Windows Presentation Foundation), in fact write a complete web-application.
2. Firefox + Firebug (Windows, Linux, Mac OS X)
If you do not want another heavy installation and just want to write plain JS and test it right inside your browser, you can do that with Firebug installed over Firefox. If you do not have Firefox thendownload install the latest version (3.6.13 at the time of writing this) and then download and install the Firebug plugin for Firefox from here (Or you can go to Tools –> Add-Ons –> Get Add-Ons and type in Firebug and install it). This is by far one of the most popular and most download Firefox Add-on too which speaks for itself.
Here’s a simple starter for writing and live-debugging JS using Firebug:
Fire up Firefox and open the JavaScipt that you want to inspect and debug.
If you have installed Firebug then a small bug icon will appear at the bottom-right corner of Firefox, that’s where you will open Firebug right inside Firefox. Since we’re inspecting JS, you need to click theScript button in the Firebug button panel:
You can set break point, conditional breakpoints and also profile your JS in addition to a couple of other features. This is a nice place to get started with Firebug.
Since Firebug does not include a Text Editor in which you can write code but you can add any text editor (preferably Notepad++) by going to Tools –> Firebug –> Open With Text Editor –> Add New Editor
3. Aptana Studio (Windows)
If you want to do some professional development then Aptana Studio would be a decent choice and best of all, it’s free! Download and install from here. You can use Aptana as a plugin with your Eclipse or you can download the standalone Aptana Studio. If you already use Eclipse then the Aptana plugin would be the natural choice.
Aptana Studio is pretty simple compared with Visual Web Developer + VS2010. You can Debug your JS using Firefox+Firebug. What’s really cool about it is the support for popular JS libraries like Dojo, Yahoo! UI etc. If you’re planning on using 3rd party JS libraries then you should choose Aptana Studio. It also comes with a nice FTP client integrated into it which comes in handy when you want to do live-development. Moreover, you can also preview your JS in action right inside it using the integrated browser view (it supports IE, Firefox and Safari).
4. Komodo IDE (Windows, Linux, Mac OS X)
Even though Komodo is not free but it’s worth your money if you write JS (or web apps for that matter) for a living. Komodo IDE comes packed with a code editor that supports almost every language in which you can write web apps. Besides all the usual features you can integrate almost any source control into the IDE. It also includes Database Explorer which lets you dig into your website’s database right from the IDE. If you’re developing web apps then you know how handy this could be. You can find the whole list of features on here.
5. Komodo Edit (Free) (Windows, Linux, Mac OS X)
Komodo Edit is the free version of Komodo IDE minus the integrated debugger and a couple more less-important features. I would recommend trying out your hands on Komodo Edit first before going for the Komodo IDE since it would give you a feel of working in Komodo. It is free and open-source unlike the Komodo IDE. You still get a code editor, intelli-sense and it also integrates nicely with Firefox+Firebug. You can get Komodo Editor from here.
6. Eclipse + JSEclipse Plugin (Windows, Linux, Mac OS X)
JSEclipse is a nice plugin for Eclipse so if you’re already developing on Eclipse then this would be a natural choice. However, I should warn that since Adobe acquired Interakt, the company that made JSEclipse, active development has stopped on JSEclipse as of late December 2010. But still if you want to just try out writing JS then it will be a good start since it can easily integrate with Firefox+Firebug. When I say that it can integrate, what I mean is that you can use it’s source editor as a text editor for Firebug. Find out more about JSEclipse on here.
7. NetBeans (Windows, Linux, Mac OS X and Solaris)
NetBeans also has some great support for writing simple as well as complex JavaScript. It sports a source code editor with auto-complete and intelli-sense and a debugger that integrates well with Internet Explorer as well as Firefox. And just like Aptana Studio, it has extensive support for integrating popular AJAX, JS libraries like Yahoo! UI, Prototype, Script.aculo.us etc into your code. You can target your JS, in fact your complete app for the whole range of popular browsers and check separately for each browser right inside it. There’s a very nice tutorial on getting started with writing Web Services that would come in hand. You can view it here. Click here to read more about the JS support in the NetBeans IDE.
8. WebStorm (Windows, Linux, Mac OS X)
WebStorm by the JetBrains has to be the latest JavaScript IDE. It’s light-weight and sports a JS code editor, debugger (support for putting breakpoints, conditional breakpoints, step-in, step-over etc). You can also integrate Firebug with WebStorm to debug right inside Firefox. It also has good support for writing HTML5 and just like Aptana Studio you can connect to an FTP server to sync your scripts. I wish they had support for some popular Source Control plugins since without it we cannot write large applications. Find out more about WebStorm’s JavaScript support on here. You can try out the 45-day trial.
Mozilla Offers Absolutely FREE JavaScript, HTML5 and CSS Courses
How about starting off with learning JS, HTML5 and CSS from the gurus? After the first successful round of this initiative in which 15 courses were offered in collaboration with P2PU (Peer 2 Peer University), the next round which will include up-to 30 different courses (absolutely free) ranging from writing awesome web-applications using JS, CSS and HTML5 to SEO (Search Engine Optimization). Registration opens from January 8 2011. The courses will be from 8 to 12 weeks long. You can sign-up on here.
This article originally published by:-programmersfish
No comments:
Post a Comment