HTML+CSS & JS Development in NetBeans

I recently posted that Tweet after some of really cool things I discovered in the new NetBeans. And yes, OMG… the things I came across.

Artifact Free Projects

You could have folder-based projects in NetBeans by creating favourites. Since NetBeans 7.1 you could have directories containing HTML+CSS & JS files as projects. Without any nasty IDE specific files.

Support for directories containing HTML files as first-class projects. Automatically opens any dir named ‘www’ or ‘public-html’ as a project; other directories can be opened via New > Project. Stores nothing inside your web directory that might clutter your web server. Provides a flattened logical view of all HTML files in all subdirs of the project, listed by HTML title rather than file title, and support for ‘building’ (zipping) and ‘running’ (viewing). Generally should be handy for doing documentation and articles.

What does that look like?

Project from Existing Sources

The New Project dialog contains an entry to allow creation of projects from existing sources.

Once the project is created, more magic is unveiled.

Project Window

Yes, NetBeans scans your HTML files (and possibly other files) for remote sources and lists them under Remote Files. When selected, those files are downloaded for your viewing please. Brilliant little feature!

Chrome Integration

Yeah, that too. It is exactly what you might think it is. You can inspect HTML+CSS and debug JS in NetBeans via a Chrome extension.

No, I’m not lying.


The inspector highlights elements in HTML as you would in a Webkit Web Inspector. It also enables Javascript debugging. Very similar to Visual Studio’s integration with IE debugging tools, except you get the amazing Javascript support that NetBeans offers.

How do you invoke this dark magic? Apart from NetBeans 7.3 I, installed NetBeans Connector from the Chrome Web Store. As you will find out from the extension details there are plenty of delicious features:

With this integration, comes the ability to:
* Refresh on Save
* Live DOM navigation from within the IDE itself
* Bi-directional element inspection. Click in the browser, see it in the IDE, and vice-versa
* JavaScript debugging of the application using Remote WebKit APIs
* Visual CSS Style editing of all page elements, including JavaScript generated elements
* Screen resizing to veiw your application at various pre-defined sizes (Smartphone, Tablet, etc.), or sizes that you can define yourself

There you have it. Two really awesome NetBeans features that makes the HTML+CSS & JS development process smoother.

By the way, Sublime Text rocks!

Leave a Reply