Lyndon is a general Developer. He has a keen interest in AI and Games Programming and runs a blog that he periodically updates.

The beta for NetBeans 7.3 is out and with it comes Project Easel.

Easel makes debugging HTML5 projects very easy. If you have ever done any work with HTML5 and JavaScript you know the normal process; edit file in a text editor (or IDE) then navigate to the page and refresh. Oh and download and turn on dev tools for the browser you are using, making sure you bring them up each time you open the page.

Whilst this is not too much of an inconvenience; forgetting to refresh can cause some confusion when editing files, not to mention the constant switching can slow your work flow when changing simple things like some CSS style rules. NetBeans does away with these problems!

To get started with Easel, download NetBeans (making sure to either get the Full version or JavaEE version as I don’t believe Easel is in the standard JSE version), install it and create a new project:

After creating a new project from scratch or from an existing source (this is the one I use the most for debugging results from our PDF2HTML5 converter), you can then run the project or a file within it and it will attempt to open Google Chrome with the NetBeans plugin running on the tab. If you don’t have the plugin it will prompt you to install it.

This is really easy! NetBeans even links you to the folder it’s in so you don’t have to look for it, simple follow the instructions and you are all set!

Now whenever you run a file or project in NetBeans it will use the plugin to help you debug the page.

So how does the plugin help your work? Well to start with it pipes all the console outputs and error messages back to NetBeans with click-able links that will take you to the problem files and lines within those files.

And any changes you make in the IDE are instantly reflected in the browser window! So no need to manually refresh the page. This works great if you have a large enough resolution to have NetBeans and Chrome side by side or a dual monitor set-up.

It also comes with this nifty menu that allows you to preview what your pages will look like at different resolutions, along with a select tool! You can even add resolutions to the list and edit the existing ones.

I’ve only just started to scratch the surface of the new features of NetBeans 7.3, I am certain there are even more interesting features I haven’t even looked at yet!

Feel free to share what you have learnt using NetBeans and Project Easel!

Did you know...

IDRsolutions offers a whole range of online file converters to convert PDF and Microsoft Excel, Word and Office Documents to HTML5, SVG or image formats?

It is free to use for single file conversions and also includes Developer links if you want to use our commercial software for bulk conversions. Find out more on this page