QtWebEngine debugging

QtWebEngine debugging

本文关键字：debugging QtWebEngine      更新时间：2023-10-16

最近Qt推出了QtWebEngine模块。有没有一种方法可以调用开发人员工具并调试QWebEngineView中的JavaScript代码？QWebView使用是可能的

page()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);

但我在QWebEngineView中找不到任何类似的选项。

我刚刚看到这个，所以我把它添加到这里是为了子孙后代。

它刚刚被添加到Qt 5.5 git中。您必须通过环境变量QTWEBENGINE_REMOTE_DEBUGGING=<port>启用它。如果您正在调试嵌入式设备，并且不能使用本地控制台，则可以放置0.0.0.0:<port>。然后你可以点可以连接到http://127.0.0.1:以获取调试器。它需要是一个基于铬的浏览器。你必须使用Chrome浏览器吗？或者如果你愿意，你可以使用"快速纳米浏览器"的例子。

或者，可以嵌入Firebug Lite来获得JavaScript控制台和检查器。

只需添加

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

进入页面。按F12将显示Firebug控制台。

对于PyQt5，以下代码段：

        self.mainLayout = QtWidgets.QVBoxLayout()
        self.webView = QtWebEngineWidgets.QWebEngineView()
        self.mainLayout.addWidget(self.webView, 100)
        self.webView.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.JavascriptEnabled, True)
        self.webView.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.LocalContentCanAccessRemoteUrls, True)
        self.webView.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.ErrorPageEnabled, True)
        self.webView.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.PluginsEnabled, True)

        dev_view = QtWebEngineWidgets.QWebEngineView()
        self.mainLayout.addWidget(dev_view, 100)
        self.webView.page().setDevToolsPage(dev_view.page())

如果您的devtools视图和页面在同一个程序中，请使用qt函数直接导航到页面devtools，而不是http://localhost:port whith是devtools索引（必须选择which页面的devtools）。

QTWEBENGINE_REMOTE_DEBUGGING设置后

>=5.13:

void QWebEnginePage::setDevToolsPage(QWebEnginePage *devToolsPage)

5.11~5.12:

void QWebEnginePage::setInspectedPage(QWebEnginePage *page)

样品pyqt5.12

dev_view = QWebEngineView()  # new web view
self.page().setDevToolsPage(dev_view.page())  # self is the source web view

参考：

https://doc.qt.io/qt-5/qwebenginepage.html#setDevToolsPage

https://doc.qt.io/qt-5/qwebenginepage.html#setInspectedPage

来源http://blog.qt.io/blog/2015/03/17/qt-5-5-alpha-available/:

远程检查器可以通过定义env变量来使用QTWEBONGINE_REMOTE_DEBUGGING，或通过提供–远程调试端口命令行参数。然后你可以指向在指定端口浏览并检查您的web内容。

看这个：

Chromium DevTools提供了检查和调试任何web内容的布局和性能问题的能力

https://doc.qt.io/qt-5/qtwebengine-features.html#chromium-devtools

相关文章：