QtWebEngine调试

Question

最近 Qt 引入了 QtWebEngine 模块。有没有办法调用开发人员工具并调试 QWebEngineView 中的 JavaScript 代码？ QWebView 使用

是可能的

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

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

Answer 1

我只是运行穿过这个所以我把它添加在这里以供后代使用。

它刚刚添加到 Qt 5.5 git。您必须通过环境变量 QTWEBENGINE_REMOTE_DEBUGGING=<port> 启用它。如果您正在调试嵌入式设备并且不能使用本地控制台，则可以输入 0.0.0.0:<port>。然后你可以点 can connect to http://127.0.0.1: 来获取调试器。它需要是基于铬的浏览器。您是否必须使用 Chrome，或者您可以根据需要实际使用 "quick nano browser" 示例。

Answer 2

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

The remote inspector can be used by either defining the env variable QTWEBENGINE_REMOTE_DEBUGGING, or by supplying the –remote-debugging-port command line argument. You can then point a browser at the specified port and inspect your web content.

Answer 3

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

只需添加

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

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

Answer 4

看这个：

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

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

Answer 5

如果你的devtools视图和页面在同一个程序中，使用qt函数直接导航到页面devtools而不是http://localhost:portwhith是devtools索引（必须selectwhitch页面的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

Answer 6

对于 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())

QtWebEngine调试

QtWebEngine debugging

c++

qt

qtwebengine