Debugging a web component

Debugging a Web Component with the GBC front-end

In order to debug a Web Component when displayed on the GBC front-end, start the debug mode of your browser (for example, in Chrome, hit the F12 key), and use the integrated HTML / JavaScript debugger to inspect the Web Component contents.

Debugging a Web Component with the GDC front-end

To enable web component debugging with GDC, define the TCP port where a Chrome browser can connect to, in order to use the QT WebEngine Developer Tools.

With GDC, the web component debug port can be defined with the --webengine-remote-debugging command line option, or by setting the QTWEBENGINE_REMOTE_DEBUGGING environment variable, before starting the GDC.

Note: The command line option takes precedence over the environment variable.
For both the --webengine-remote-debugging command line option and the QTWEBENGINE_REMOTE_DEBUGGING environment variable, the syntax is:
[address:]port
Tip: The same debugging features of the QT WebEngine Developer Tools are available when using the --webengine-remote-debugging command line option, or when using the QTWEBENGINE_REMOTE_DEBUGGING environment variable. See QT documentation for more details about debugging features when QTWEBENGINE_REMOTE_DEBUGGING is set.

Define a simple port number, or a network interface address and port with address:port. The address:port syntax can be used to control which network interface to export the interface on, to access the developer tools from a remote computer. If no address is specified, it defaults to localhost.

After starting the Genero program displaying on GDC, the QT WebEngine Developer Tools can be accessed by launching a Chrome browser at the following URL:
  • http://localhost:port (when the GDC executes on the current host)
  • http://hostname_or_IP:port (when the GDC executes on a remote machine)

For example, to restrict the access to the debugging tools to the local machine on port 9000, use the value "127.0.0.1:9000". To (theoretically) access from any computer in your network on port 9000, use "0.0.0.0:9000".

Debugging a Web Component with the GMA front-end

In order to debug a web component displayed on GMA, you need a Chrome web browser, and an USB cable to plug the device to your computer.

Steps to debug a web component on GMA:
  1. Connect your device to your desktop with the USB cable.
  2. Stop GMA on the device, if it is already running.
  3. Enable debugging option in GMA parameters.
  4. Start the application with a web component. This will start GMA with debug service enabled (please wait as the application could take longer to start)
  5. Open Chrome on the desktop computer.
  6. In the Chrome URL address bar, enter: chrome://inspect/#devices
  7. On the device, accept the USB debugging.
  8. Click on "inspect" link to open the HTML debug window.

Debugging a Web Component with the GMI front-end

In order to debug a web component displayed on GMI, you need to setup the Safari® Web Inspector. Check the Apple® development site for more details about enabling the Safari Web Inspector: http://developer.apple.com.

Steps to debug a web component on GMI:
  1. On you Mac, open Safari and make sure the "Develop" option is available. If this option is not available, go to Safari preferences and enable the option.
  2. On the device, go to Settings. In Safari preferences, go to Advanced and enable the Web Inspector option.
  3. Run the app on the device or simulator, or start the program in development mode to display on the GMI front-end.
  4. On the Mac, find the connected device/simulator in the Develop menu of Safari and browse the debuggable components.