Qt内置浏览器引擎WebEngine调试和分析方法

问题背景

H5和JS代码写好了，在浏览器里调试也一切OK，然后嵌入到Qt中，发现各种问题，这时候，如何在Qt框架下调试Web的代码呢？

调试方法

在Qt帮助文档中，搜索Qt WebEngine Debugging and Profiling，重点关注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.

1. 设置命令行参数

在windows命令行中输入如下参数，启动你的程序。

YourApp.exe --remote-debugging-port=16101

例如调试百度首页，打开百度后，在chrome浏览器里输入

http://localhost:16101

很熟悉的调试页面啊。

2. 设置环境变量

如下图所示，添加环境变量QTWEBENGINE_REMOTE_DEBUGGING，然后直接在Qt Create中debug运行即可，效果跟方法一中使用命令行参数相同。打开浏览器输入相应的端口即可，就不在贴图了。

总结

方法一适用于生产环境中，发现问题时的现场调试，方法二适用于开发过程中的调试。