QtWebEngine debugging
Solution 1
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 QTWEBENGINE_REMOTE_DEBUGGING=<port>
. You can put 0.0.0.0:<port>
if you are doing debugging of an embedded device and cant use the local console. Then you can point can connect to http://127.0.0.1: 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.
Solution 2
Alternatively, one may embed Firebug Lite to get a JavaScript console and inspectors.
Just add
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
into the page. Pressing F12 will visualize the Firebug console.
Solution 3
From 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.
Solution 4
If your devtools view and page are in the same program,use qt function to directly navigate to page devtools instead of http://localhost:port
whith is devtools index(have to select devtools of whitch page).
After QTWEBENGINE_REMOTE_DEBUGGING
being set up
>=5.13
:
void QWebEnginePage::setDevToolsPage(QWebEnginePage *devToolsPage)
5.11~5.12
:
void QWebEnginePage::setInspectedPage(QWebEnginePage *page)
Sample pyqt5.12
dev_view = QWebEngineView() # new web view
self.page().setDevToolsPage(dev_view.page()) # self is the source web view
Reference:
https://doc.qt.io/qt-5/qwebenginepage.html#setDevToolsPage
https://doc.qt.io/qt-5/qwebenginepage.html#setInspectedPage
Solution 5
For PyQt5 the following snippet:
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())
Related videos on Youtube
![Roman Kolesnikov](https://i.stack.imgur.com/W8PnM.png?s=256&g=1)
Roman Kolesnikov
Updated on June 04, 2022Comments
-
Roman Kolesnikov about 2 years
Recently Qt introduced the
QtWebEngine
module. Is there a way to invoke developer tools and debug JavaScript code insideQWebEngineView
? It was possible withQWebView
usingpage()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
but I couldn't find any similar option in
QWebEngineView
. -
Prasad Silva about 9 yearsDid you try using QtWebEngine itself to host the debugger instead of an external Chromium based browser?
-
Ian Reinhart Geiser about 9 yearsYes that does work. It just requires a bit more ram. It seemed to work the exact same though.
-
Vicky Chijwani over 8 yearsIs anybody able to make this work with Qt 5.5.0 + Chrome 47 on Linux? It was working fine a couple of months ago, but now I just get a blank page when I select my page from the "Inspectable pages" list :-/. I'm guessing it's because the devtools protocol has changed in a backwards-incompatible way.
-
Vicky Chijwani over 8 yearsHuh, strangely this works when I build my app with an old Qt 5.5.0 beta I had lying around, but not with the final 5.5.0 release. Looks like a Qt regression.
-
vehsakul about 7 years@VickyChijwani Any update on this? Experience the same with Qt 5.7.
-
Vicky Chijwani about 7 years@vehsakul yes. If I remember correctly, I was making a mistake when I wrote that comment. The environment variable needs to be set before any calls to Qt WebEngine functions, including functions in
QWebEngineSettings
et al - any calls like that will spawn the Chromium "zygote" process immediately, so new environment changes won't be picked up. You can actually observe the zygote process being spawned with a tool likehtop
, if you set your breakpoints correctly ;) -
Vicky Chijwani about 7 years@vehsakul also, if there were any bugs in the debugging protocol (I don't remember), I'm pretty sure they were fixed in Qt 5.5.1, because we shipped with that version.