[SOLVED] Getting log output from Qt 5 WebView?

Getting log output from Qt 5 WebView?

I'm trying to get the console log output from a Qt 5 WebView web page, but I cannot find out how to do it. Maybe some out you out there can help me?

I have tried to enable the web inspector that is supposed to show up when you right click the web page, but nothing happens when I do that. I have set up an inspector port (on 1111) by setting the environment variable QTWEBKIT_INSPECTOR_SERVER to 1111. And I am able to get a page that has this on it:

Inspectable web views

LOG TEST [http://MY_LAN_IP:8880/logtest.html]

But when I click the link I get this error:

WebSocket connection to 'ws://localhost:1111/devtools/page/1' failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received
inspector.js:341 Event {clipboardData: undefined, path: NodeList[0], cancelBubble: false, returnValue: true, srcElement: WebSocket…}
View.js:363 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

For demo purposes I have a web page on a local web server that looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>LOG TEST</title>
    </head>
    <body>
        <h1>Logging to console...</h1>
        <script>
            setInterval(function() {
                console.log("This is a log message");
                console.error("This is an error message");
            }, 1000);
        </script>
    </body>
</html>

The QML file looks like this:

import QtQuick 2.2
import QtQuick.Window 2.1
import QtWebKit 3.0
import QtWebKit.experimental 1.0

Window {
    visible: true
    width: 360
    height: 360

    WebView {
        url: "http://MY_LAN_IP:8880/logtest.html"
        anchors.fill: parent
        experimental.preferences.developerExtrasEnabled: true
        experimental.preferences.navigatorQtObjectEnabled: false

    }
}

Solution

Following this link I successfully show my logs from a webpage embedded in a QML WebView.

In your post you are really near of the goal.

You must :

Set the runtime environment variable QTWEBKIT_INSPECTOR_SERVER to whatever you want (so why not 1111).
In the QML file import QtWebKit.experimental 1.0
and in the webview properies add : experimental.preferences.developerExtrasEnabled: true

Then, when you launch your application you must have the following output trace :

Inspector server started successfully. Try pointing a WebKit browser to http://127.0.0.1:1111

To debug your page, open your favorite web browser and go to http://127.0.0.1:1111, and its done !

So the interface has changed, in old QtWebKit you must right click on the web view to debug the page, now you must connect to the server thanks to a web browser.