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 argument --remote-debugging-port=<portnumber>.

--webEngineArgs --remote-debugging-port=<portnumber>

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.

To avoid WebSocket errors during remote debugging, add an additional command-line argument --remote-allow-origins=<origin>[,<origin>, ...], where <origin> refers to the request origin. Use --remote-allow-origins=* to allow connections from all origins. If nothing is specified, Qt WebEngine will add --remote-allow-origins=* to command-line arguments when remote-debugging is enabled, thereby allowing requests from all origins.

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

Using Command-Line Arguments

You can use the following command-line arguments while debugging to provide input for bug reports:

• --disable-gpu disables GPU hardware acceleration. This is useful when diagnosing OpenGL problems.
• --disable-logging disables console logging, which might be useful for debug builds.
• --enable-logging --log-level=0 enables console logging and sets the logging level to 0, which means that messages of the severity info and above are recorded in the log. This is the default for debug builds. Other possible log levels are 1 for warnings, 2 for errors, and 3 for fatal errors.
• --v=1 Increases the logging level beyond what --log-level can, and enables logging debug messages up to verbosity level 1. A higher number further increases verbosity, but may result in a large number of logged messages. Default is 0 (no debug messages).
• --no-sandbox disables the sandbox for the renderer and plugin processes. Keep in mind that disabling the sandbox might present a security risk.
• --single-process runs the renderer and plugins in the same process as the browser. This is useful for getting stack traces for renderer crashes.
• --enable-features=NetworkServiceInProcess runs networking in the main process. This may help firewall management, since only the application executable will need to be whitelisted and not QtWebEngineProcess. It means losing the security of sandboxing of the network service though.

Any WebEngine command line options should be specified after the --webEngineArgs option, which is used to separate the user's application specific options from the WebEngine's ones.

--webEngineArgs [WebEngine specific options]

Alternatively, the environment variable QTWEBENGINE_CHROMIUM_FLAGS can be set. For example, the following value could be set to disable logging while debugging an application called mybrowser:

QTWEBENGINE_CHROMIUM_FLAGS="--disable-logging" mybrowser

QTWEBENGINE_CHROMIUM_FLAGS can also be set using qputenv from within the application if called before QtWebEngineQuick::initialize().

Dump WebEngineContext Information

For dumping the WebEngineContext information, you can set the QT_LOGGING_RULES environment variable to "qt.webenginecontext.debug=true".

The output contains information about the graphical backend, and the way how Qt WebEngine is initialized for the application. This is particularly useful for reproducing issues.