QtWebEngine debugging

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.

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

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.

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.