In NetBeans IDE 7.4, which is currently in its Beta release, go to the New Project wizard and search for 'websocket'. You'll find three very cool WebSocket samples are now bundled with the IDE. Let's play with the "Auction WebSocket (Java EE 7)" sample. Select it and complete the wizard.
Select "Chrome with NetBeans Integration" in the handy new browser switcher in the toolbar. Run the application and the initial page opens in the Chrome browser. In 7.4, for the first time, you'll now see the NetBeans icon in the top right of the browser for your Maven-based Java web project, if you have installed the NetBeans plugin into Chrome. Below the mouse is over "Enter your user name" in the browser.
Therefore, you can now select, as has been done in the screenshot above, "Inspect in NetBeans" mode, which lets you click items in the browser, causing the corresponding nodes in the Navigator in the IDE to be highlighted. From a node in the Navigator, you can right-click to jump to the source in the editor.
In the editor, change something, save, and the browser is automatically refreshed to display your change.
Conversely, you can browse and identify items in the browser by hovering over the nodes in the Navigator in the IDE. Below, the mouse is over the second to last node in the Navigator.
Also, the brand new Network Monitor is available. WebSocket communication is automatically displayed in it:
For further and related information, see the NetBeans WebClient blog's article HTML5 Development for Java EE and PHP projects.