Inspecting HTML5 Code with the Browser

See Also 

You can use the Inspect mode to help you locate and edit the source code in an HTML5 application. When Inspect mode is enabled, information about some of the actions that you perform in the browser such as selecting and highlighting elements is communicated to the IDE. When you run the application you can use your browser to help you locate HTML elements in your source code. When you select or place your cursor over elements in the browser window the element is simultaneously highlighted or selected in the Navigator window of the IDE. When you select an element the style rules for the element are automatically displayed in the Selection tab of the CSS Styles window.

To inspect your application with a browser, perform the following steps.

  1. Set the target browser for the application to one of the following browsers.
  2. Run the application or file.

    When you run the application the target browser opens and displays the index page or file in the window.

  3. Enable Inspect mode (Ctrl-Shift-S) in the browser.

    In the Chrome browser you can enable Inspect mode in the NetBeans Actions menu. In the Embedded WebKit Browser you can click the Inspect button in the toolbar.

  4. Select an HTML element in the page in the browser window.

When you select an element in the browser the contents of the following windows in the IDE are updated to synchronize with the selected element.

See Also
Integrating an HTML5 Project with the Browser
Running an HTML5 Application
Editing a Cascading Style Sheet

Legal Notices