blocks|key|4531764|text|我只是偶然发现了这一点，所以我把它加到了这里，以供后人参考。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4531765|它刚刚被添加到Qt5.5+git中。您必须通过环境变量QTWEBENGINE_REMOTE_DEBUGGING=<port>启用它。如果你正在调试一个嵌入式设备，并且不能使用本地控制台，你可以使用0.0.0.0:<port>。然后，您可以指向可以连接到http://127.0.0.1：以获取调试器。它将需要是一个基于铬的浏览器。你必须使用Chrome吗，或者如果你愿意，你可以使用“快速纳米浏览器”的例子。|offset|length|style|CODE|4531766|entityMap|0|LINK|mutability|MUTABLE|url|http://127.0.0.1/^0|0|R|Z|2Q|E|3I|G|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]|$D|T|E|U|F|G]]|9|@$D|V|E|W|1|X]]|A|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

I just ran across this so I added it here for posterity.

It was just added to Qt 5.5 git. You have to enable it via an environment variable <code>QTWEBENGINE_REMOTE_DEBUGGING=&lt;port&gt;</code>. You can put <code>0.0.0.0:&lt;port&gt;</code> if you are doing debugging of an embedded device and cant use the local console. Then you can point can connect to <a href="http://127.0.0.1">http://127.0.0.1</a>: to get the debugger. It will need to be a chromium based browser. Do you have to use Chrome, or you can actually use the "quick nano browser" example if you want.

blocks|key|4531784|text|或者，可以嵌入Firebug+Lite来获得JavaScript控制台和检查器。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4531785|只需添加|4531786|<script+type="text/javascript"+src="https://getfirebug.com/firebug-lite.js"></script>|code-block|syntax|javascript|4531787|添加到页面中。按F12将可视化Firebug控制台。|4531788|entityMap|0|LINK|mutability|MUTABLE|url|https://getfirebug.com/firebuglite^0|7|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Alternatively, one may embed <a href="https://getfirebug.com/firebuglite" rel="noreferrer">Firebug Lite</a> to get a JavaScript console and inspectors.

Just add 

<pre><code>&lt;script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"&gt;&lt;/script&gt;
</code></pre>

into the page. Pressing F12 will visualize the Firebug console.

blocks|key|24298|text|如果你的开发工具视图和页面在同一程序中，使用qt函数直接导航到开发工具页面，而不是http://localhost:port，因为它是开发工具索引(必须选择开发工具的页面)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|24299|在设置QTWEBENGINE_REMOTE_DEBUGGING之后|24300|>=5.13|24301|void+QWebEnginePage::setDevToolsPage(QWebEnginePage+*devToolsPage)|code-block|syntax|javascript|24302|5.11~5.12|24303|void+QWebEnginePage::setInspectedPage(QWebEnginePage+*page)|24304|示例pyqt5.12|24305|dev_view+=+QWebEngineView()++#+new+web+view
self.page().setDevToolsPage(dev_view.page())++#+self+is+the+source+web+view|24306|参考资料：|24307|https://doc.qt.io/qt-5/qwebenginepage.html#setDevToolsPage|24308|https://doc.qt.io/qt-5/qwebenginepage.html#setInspectedPage|24309|entityMap|0|LINK|mutability|MUTABLE|url|1^0|15|L|0|3|S|0|0|6|0|0|0|9|0|0|2|8|0|0|0|0|1M|0|0|0|1N|1|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1J|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1N|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|U|3|V|5|L|7|1R|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|1S|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|10|3|11|5|6|7|1X|8|@]|D|@$9|1Y|A|1Z|1|20]]|E|$]]|$1|12|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|Z]]|19|$5|15|16|17|E|$18|11]]]]

If your devtools view and page are in the same program，use qt function to directly navigate to page devtools instead of <code>http://localhost:port</code> whith is devtools index(have to select devtools of whitch page).
After <code>QTWEBENGINE_REMOTE_DEBUGGING</code> being set up
<code>&gt;=5.13</code>:
<pre><code>void QWebEnginePage::setDevToolsPage(QWebEnginePage *devToolsPage)
</code></pre>
<code>5.11~5.12</code>:
<pre><code>void QWebEnginePage::setInspectedPage(QWebEnginePage *page)
</code></pre>
Sample <code>pyqt5.12</code>
<pre><code>dev_view = QWebEngineView() # new web view
self.page().setDevToolsPage(dev_view.page()) # self is the source web view
</code></pre>
Reference:
<a href="https://doc.qt.io/qt-5/qwebenginepage.html#setDevToolsPage" rel="nofollow noreferrer">https://doc.qt.io/qt-5/qwebenginepage.html#setDevToolsPage</a>
<a href="https://doc.qt.io/qt-5/qwebenginepage.html#setInspectedPage" rel="nofollow noreferrer">https://doc.qt.io/qt-5/qwebenginepage.html#setInspectedPage</a>

blocks|key|24238|text|看看这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|24239|Chromium+DevTools提供了检查和调试任何web内容的布局和性能问题的能力|24240|https://doc.qt.io/qt-5/qtwebengine-features.html#chromium-devtools|offset|length|24241|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1U|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

look this：

The Chromium DevTools provide the ability to inspect and debug layout and performance issues of any web content

<a href="https://doc.qt.io/qt-5/qtwebengine-features.html#chromium-devtools" rel="nofollow noreferrer">https://doc.qt.io/qt-5/qtwebengine-features.html#chromium-devtools</a>

blocks|key|24325|text|对于PyQt5，以下代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|24326|++++++++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())|code-block|syntax|javascript|24327|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For PyQt5 the following snippet:
<pre class="lang-py prettyprint-override"><code> 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())
</code></pre>

Recently Qt introduced the <code>QtWebEngine</code> module. Is there a way to invoke developer tools and debug JavaScript code inside <code>QWebEngineView</code>? It was possible with <code>QWebView</code> using 

<pre><code>page()-&gt;settings()-&gt;setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
</code></pre>

but I couldn't find any similar option in <code>QWebEngineView</code>.

QtWebEngine debugging

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

最近，Qt引入了QtWebEngine模块。有没有办法在QWebEngineView中调用开发人员工具和调试JavaScript代码？在使用QWebView时，可以使用page()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);但我在QWebEngineView中找不到任何类似的选项。

问QtWebEngine调试
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问QtWebEngine调试EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问QtWebEngine调试
EN