NetBeans & Project Easel for easy HTML5 debugging

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 7.3 Beta (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:

New NetBeans 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.

NetBeans needs this extension installedThis 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!

Its that simple!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. Netbeans Browser Output Log

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.

NetBeans Plugin MenuI’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 7.3 and Project Easel!

This post is part of our “HTML5 Article index” in these articles, we aim to help you understand the world of HTML5.

Related Posts:

The following two tabs change content below.
Lyndon is a Developer at IDR Solutions. He currently focuses mostly on the JavaScript in the Viewer and PDF to HTML5 Converter and also the Android PDF Viewer. He gave a short talk at the GlassFish UnConference before JavaOne 2012. Outside of IDR Solutions he has a keen interest in AI and Games Programming and runs a blog that he periodically updates.
lyndon

About Lyndon Armitage

Lyndon is a Developer at IDR Solutions. He currently focuses mostly on the JavaScript in the Viewer and PDF to HTML5 Converter and also the Android PDF Viewer. He gave a short talk at the GlassFish UnConference before JavaOne 2012.

Outside of IDR Solutions he has a keen interest in AI and Games Programming and runs a blog that he periodically updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>