What works better for you? NetBeans IDE or Chrome Developer Tools?

I've heard variations of this question many times: Is the JavaScript Debugger in NetBeans IDE  better than the one in Chrome Developer Tools (CDT)? How do they compare feature by feature? Why should I use the one in NetBeans instead of the JavaScript debugger in CDT?

Apples and Pears

While it is tempting to put together a feature matrix with one column for NetBeans and the other column for CDT, and then compare the number of checkboxes, this comparison would not make much sense. Because it is like comparing apples and pears. No, that's misleading too. It is like comparing a car factory (NetBeans IDE) with a car mechanic (CDT). Both car factory and car mechanic have a very vast and detailed knowledge about cars but they also have a very different focus. A car factory knows what steps there are to build a car from scratch and everything is optimized around this primary function - to build a new car of a certain brand. A car mechanic, on the other hand, is not concerned with most of the aspects of car manufacturing. The primary function of a car mechanic is being able to find what's wrong with a car and fix it. Regardless of the car brand, age, size, and state. You would not ask your local car mechanic workshop to build you a new car, would you? Neither would you drive your Subaru into the Ford factory to get it fixed.

Let's play with this metaphor a little bit more. How does NetBeans help you to build your project from scratch? It tightly integrates many separate tools to work seamlessly and optimizes the daily workflow of a typical developer. It comes with:

  • templates for project creation (e.g., Bootstrap, HTML5 Boilerplate, AngularJS Seed, your custom one, etc.)
  • support for components and libraries (e.g., CDNJS.com integration)
  • support for project version control (e.g., GIT, HG, SVN, local versioning, etc.)
  • support for project compilation (e.g., PhoneGap; coming  very soon is SASS compiler)
  • editor with syntax coloring, semantic features like refactorings, active error recognition, code assist, code navigation, etc. (JavaScript, HTML, CSS, SASS, etc.)
  • support for problem diagnostics (e.g., JS debugger, network monitor, etc.)
  • server to run your project on
  • support for writing, running and debugging of unit tests (e.g., jstestdriver runner)
  • support for editing visual part of your project (e.g., CSS styling)
  • support for different target browsers (e.g., Chrome, Embedded WebKit, Android, iOS, PhoneGap native apps)

Seamless Integration

The true advantage, though, is in the seamless integration. An example of what I mean: with a few mouse clicks you can create a new project which uses, e.g., the AngularJS Seed project template; press F6 to start an internal server and open the project in a browser; type some JavaScript and save it and the browser will reload your project automatically; debug your JavaScript code directly in the editor in which you authored it - as simple as adding a breakpoint to a line in the editor; open Browser Log window to see a runtime exception in your code and click on the stack trace to go directly to offending line and column of the code using the same JavaScript editor; with a few clicks create a config file for JsTestDriver and debug unit tests just as regular JavaScript files; get outstanding code completion for jQuery and other selected JS libraries; etc.


This kind of integration is hard to achieve when using disparate tools. Not surprisingly, it was also the number one request in a recent FireFox Dev Tools study.

Surgery

Using still the same parallel, where the CDT excels is in the role of a car mechanic of web applications. It does not matter who produced the application, nor how, and it does not matter which languages they used, how small/big/new/old the application is, none of this matters. The CDT is there, ready to help you figure out the problem and repair it. And it comes with a very rich set of features suitable for this surgical task.

Overlaps

Now, obviously, there are features which overlap and which both IDE and CDT need. When writing code from scratch, or fixing code at runtime, you always need a JavaScript debugger and some editor. Similarly, for creating a brand new UI or tweaking an existing UI, you need styling support.

There are also areas which, IMO, distinctly belong to a single party only. For example, fine tuning performance should be done in the browser in which the application will run. Project management aspects, on the other hand, should be left to IDEs to deal with as most of the tasks are browser agnostic.

Conclusion

So to answer the original questions which triggered this article: both NetBeans IDE and CDT meet the needs of editing, styling, and debugging but they have different strengths and, according to the task at hand, you should pick one or the other and utilize their strengths to your advantage.

On a more idealistic note, I think there is an opportunity for both IDEs and browsers to cooperate more tightly. It's been really great that efforts like the Remote WebKit Debugging protocol has allowed IDEs and other tools to get inside browser internals and build better tooling for developers. To reciprocate, perhaps we should prototype some APIs through which IDE-like tools could share their project context with the browsers. That is, in the CDT case for example, there could be a CDT API callback which CDT could call to retrieve information like: how to map URL to a file in the local filesystem?; where is the source map file for a given production file?; which project files/folders are relevant for the URL being currently opened?; does this file requires compilation? compile the given file; etc. And tools like NetBeans IDE could implement this callback for all NetBeans projects. That way CDT can work better and developers, you and I, will be better off too.

What do you think?
Comments:

For me the CDT wins for one simple reason, I can use them on my PHP projects. I've had a play with the Netbeans debugging tools and they seem great, I'd love to use them but since the vast majority of my projects are mixed PHP and Javascript I can only use the Netbeans PHP debugger in my projects.

I believe there's a patch in the development version allowing the JS debugger to be used in PHP projects, I really hope this make it's way into a stable version I can use at work soon.

Posted by guest on March 27, 2013 at 02:30 AM PDT #

Yes, the patch you are talking about has been integrated into nightly dev builds so feel free to give it a try and let us know what you think. We are working on enabling most of functionality of HTML5 project type in PHP projects.

Posted by David Konecny on March 27, 2013 at 11:53 AM PDT #

We do lots of SharePoint 2010 Web Parts development. And it's a pain...
So, I've introduced NetBeans IDE few month ago, now we do prototyping and polishing in NetBeans, and then move JS to a Visual Studio project. I can say the productivity of my team increased dramatically. And they started writing cleaner and neater javascript code. We use CDT as well, but not as extensive as NetBeans

Posted by guest on March 30, 2013 at 06:00 AM PDT #

The post is based on false dichotomy of "factory/green-grass" vs "mechanic/fix-it".
But in real life, most projects are at the same time legacy code written by some people, whom you don't event know, using tools you don't want to use, and yet these projects need to grow, to get new features, to fix old bugs, to get refactored.

This is where both NetBeans and DevTools come in play - with netbeans you can use code navigation, with dev tools - step by step debugging, live object inspection.

Some things work better in one tool, some in another, but what upsets me - that neither acknowledge the need for reverse engineering and the need for quick project comprehension by new developers.

But yes, deeper integration is nice, and any efforts on making open APIs for accessing dev tools should be welcomed.

Posted by guest on April 10, 2013 at 09:48 AM PDT #

For me, its always NetBeans IDE.

Posted by Atul Palandurkar on May 02, 2013 at 12:06 PM PDT #

I like NetBeans IDE, but I go back and forth sometimes. Thanks for sharing your insight on this. I've been looking into it more and more.

Posted by Lisa searching for good designs on June 06, 2013 at 07:08 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

This is the blog of the NetBeans client-side web team, which develops the support for HTML5 applications in the NetBeans IDE.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today