Qt WebEngine Debugging and Profiling

Console Logging

JavaScript executed inside Qt WebEngine can use the Chrome console API to log information to a console. The logging messages are forwarded to Qt's logging facilities inside a js logging category. However, only warning and fatal messages are printed by default. To change this, you either have to set custom rules for the js category, or provide custom message handlers by reimplementing QWebEnginePage::javaScriptConsoleMessage(), or connecting to WebEngineView::javaScriptConsoleMessage().

All messages can also be accessed through the Qt WebEngine developer tools.

Qt WebEngine Developer Tools

The Qt WebEngine module provides web developer tools that make it easy to inspect and debug layout and performance issues of any web content.

The developer tools are accessed as a local web page using a Chromium or Qt WebEngine based browser, such as the Chrome browser.

To activate the developer tools, start an application that uses Qt WebEngine with the command-line arguments:

  --remote-debugging-port=<port_number>

Where <port_number> refers to a local network port. The web developer tools can then be accessed by launching a browser at the address http://localhost:<port_number>.

Alternatively, the environment variable QTWEBENGINE_REMOTE_DEBUGGING can be set. It can be set as either just a port working similarly to --remote-debugging-port or given both a host address and a port. The latter can be used to control which network interface to export the interface on, so that you can access the developer tools from a remote device.

For a detailed explanation of the capabilities of developer tools, see the Chrome DevTools page.