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

NetBeans & Project Easel for easy HTML5 debugging

1 min read

NetBeans Plugin Menu

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:

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 and Project Easel!

Watch how to use our PDF Viewer JPedal

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

How to convert PDF to HTML

2 min read

Dawscon 2020 Software Conference in Pictures

The latest Dawscon software conference took place today at Dawson College, Montreal. Attendance was free and there were 2 tracks with topics including JavaScript,...
Mark Stephens
17 sec read

Leave a Reply

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

IDRsolutions Ltd 2022. All rights reserved.