QtWebEngine 调试答案

【问题标题】：QtWebEngine debuggingQtWebEngine 调试
【发布时间】：2015-04-25 05:03:47
【问题描述】：

最近 Qt 引入了QtWebEngine 模块。有没有办法在QWebEngineView 中调用开发者工具和调试 JavaScript 代码？ QWebView 可以使用

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

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

【问题讨论】：

文档中似乎没有关于 QWebEngine 的这种可能性。希望它会出现在未来的版本中。

标签： c++ qt qtwebengine

【解决方案1】：

我只是遇到了这个，所以我将它添加到这里以供后代使用。

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

【讨论】：

您是否尝试使用 QtWebEngine 本身来托管调试器而不是外部基于 Chromium 的浏览器？
是的，确实有效。它只需要更多的内存。不过，它的工作原理似乎完全相同。
是否有人能够在 Linux 上使用 Qt 5.5.0 + Chrome 47 进行这项工作？几个月前它工作得很好，但是现在当我从“可检查页面”列表中选择我的页面时，我只得到一个空白页面：-/。我猜这是因为 devtools 协议发生了向后不兼容的变化。
嗯，奇怪的是，当我使用旧的 Qt 5.5.0 beta 构建我的应用程序时，这有效，但在最终的 5.5.0 版本中却不行。看起来像 Qt 回归。
@VickyChijwani 对此有何更新？使用 Qt 5.7 体验相同的体验。

【解决方案2】：

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

可以通过定义 env 变量来使用远程检查器 QTWEBENGINE_REMOTE_DEBUGGING，或通过提供 --remote-debugging-port 命令行参数。然后你可以点一个指定端口的浏览器并检查您的网页内容。

【讨论】：

【解决方案3】：

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

只需添加

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

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

【讨论】：

【解决方案4】：

看这个：

Chromium DevTools 能够检查和调试任何 Web 内容的布局和性能问题

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

对于 PyQt5 如下 sn-p:

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

【讨论】：