Integrating an HTML5 Project with a Browser

See Also 

A NetBeans extension is available for the Chrome browser that enables the IDE and the browser to communicate. To integrate the IDE with the Chrome browser you need to install the NetBeans Connector extension from the Chrome Web Store or install the extension manually. After you install the extension you can perform the following tasks in the Chrome browser.

• Use Inspect mode to select and locate elements in your code
• Debug JavaScript files
• Select various browser sizes from the NetBeans actions menu

After you install the extension, select Chrome with NetBeans Integration as the target browser and run the application.

• Do not close the infobar in the tab in the Chrome browser that informs you that "NetBeans Connector is debugging this tab". Closing the infobar will disconnect the IDE from the Chrome browser. To reconnect the IDE, close the tab where the application was running and re-run the application from the IDE.

Note. You only need to install the extension one time.

Installing the extension from the Chrome Web Store

Perform the following steps to install the NetBeans extension for the Chrome browser.

1. Right-click an HTML5 project node in the Project Projects window and choose Properties in the popup menu.

   Alternatively, you can select a target browser for the project from the dropdown list in the toolbar.

2. In the Run panel of the Properties window, select Chrome with NetBeans Integration in the server dropdown list. Click OK.
3. Right-click the HTML5 project node in the Projects window and choose Run.

   When you click Run the IDE opens a dialog that prompts you to install the extension from the Chrome Web Store.

4. After the extension is installed in the Chrome browser, click the "Re-run Project" button in the dialog box to open the HTML5 application in the Chrome browser.

   You will see an infobar in the tab in the Chrome browser that informs you that "NetBeans Connector is debugging this tab".

Installing the extension manually

If you are unable to connect to the Chrome Web Store you can install the NetBeans Connector extension manually by performing the following steps.

1. Open your Chrome browser to chrome://chrome/extensions/.
2. On your local system, navigate to the NETBEANS_INSTALL/ide/modules/lib directory, where NETBEANS_INSTALL is the installation of the IDE.
3. Drag the NetBeans Connector extension (netbeans-chrome-connector.crx) from the lib directory into the Extensions tab in the Chrome browser window and approve the addition of the extension.
4. Right-click the HTML5 project node in the Projects window and choose Run to open the application in the browser.

   You will see an infobar in the tab in the Chrome browser that informs you that "NetBeans Connector is debugging this tab".

See Also

Debugging an HTML5 Application Project

Running an HTML5 Application