Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Handy Tools for HTML5 Client Development

DZone's Guide to

Handy Tools for HTML5 Client Development

I had a chance to work a bit more with NetBeans and HTML5 client development this week. These are some handy tools.

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

I had a chance to work a bit more with NetBeans and HTML5 client development this week and some of the features that really came in handy were:

  1. autocomplete, autocomplete, autocomplete... For HTML, CSS, and AngularJS it was very very helpful, not only the fact that it gives you a list of possible options, but it also includes a snippet of documentation along with it...



    ...which was especially helpful when working with CSS which I am not as familiar with:



    Also, being able to autocomplete in HTML from a CSS class that I had just created, or autocompleting in a CSS file for an HTML element that I had just created was pretty slick as well:


  2. The NetBeans Connector plugin for Chrome was also a big time saver.



    The changes were immediately reflected in the browser as I was making them in the IDE:

     

    The other cool thing that I liked about the Chrome plugin was the ability to switch to some pre-canned views, such as Tablet and Phone portrait and landscape views, as also shown in the browser in the screenshot above.

  3. And finally, being able to step through Javascript code in the debugger was also a big help when trying to determine where some issues were occurring:

Coming from a background of Server side and Desktop Java development work, I really appreciate how NetBeans IDE helps ease the learning curve for HTML5/JavaScript web client application development.

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
netbeans ,html5

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}