QtWebEngine debugging

Question

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

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

but I couldn't find any similar option in QWebEngineView.

It seems there is nothing in documentation about this possibility for QWebEngine. Hopefully it will appear in future versions. — demonplus, Apr 16 '15 at 18:23

score 24 · Accepted Answer · answered Apr 18 '15 at 18:28

24

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.

answered Apr 18 '15 at 18:28

Ian Reinhart Geiser

454
3
5

Did you try using QtWebEngine itself to host the debugger instead of an external Chromium based browser? – Prasad Silva May 04 '15 at 14:32
1

Yes that does work. It just requires a bit more ram. It seemed to work the exact same though. – Ian Reinhart Geiser May 05 '15 at 18:52
Is 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 Jan 13 '16 at 16:38
Huh, 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. – Vicky Chijwani Jan 13 '16 at 17:51
@VickyChijwani Any update on this? Experience the same with Qt 5.7. – vehsakul May 12 '17 at 15:09
@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 like `htop`, if you set your breakpoints correctly ;) – Vicky Chijwani May 13 '17 at 01:02
@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. – Vicky Chijwani May 13 '17 at 01:05

score 11 · Answer 2 · edited Jun 17 '16 at 20:54

11

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.

edited Jun 17 '16 at 20:54

answered May 04 '15 at 15:18

Archie

2,644
21
21

score 3 · Answer 3 · answered Jul 31 '20 at 21:17

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

Jie Wu · Answer 4 · 2020-07-07T03:18:15.063

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

score 1 · Answer 5 · answered May 04 '15 at 14:34

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.

score 0 · Answer 6 · answered Jan 15 '19 at 08:36

0

look this：

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

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

answered Jan 15 '19 at 08:36

Airshu

155
1
5

QtWebEngine debugging

6 Answers6

Linked