Qt5 QML QtWebKit 3.0 JS Console

JavaScriptDude

I am working to troubleshoot the YouTubeView sample app with QT5.2 and could not find out how to get to the console.log writes from within html page running in a WebView widget.

YouTubeView sample app uses pure QML.

Is there a way to enable QWebInspector using this sample app so I can see my console.log writes from within the WebView code execution?

JavaScriptDude

I have figured this out. Took quite a bit of digging around the net showed that its possible to enable web inspector for QtWebKit

Steps required for QT 5.2:

In QML add at top:
** import QtWebKit.experimental 1.0
In QML add within WebView definition:
** experimental.preferences.developerExtrasEnabled: true
In Projects -> Build & Run -> Run -> Run Environment -> click Details -> click Add:
** Add variable: QTWEBKIT_INSPECTOR_SERVER, value: <listen_port>
*** where <listen_port> is the port you wish the server to listen on
** Alternatively value can be <bind_ip>:<listen_port>
*** where <bind_ip> is the IP address to listen on

Notes:

When the WebInspector starts, you will see a message in the application output like "Inspector server started successfully. Try pointing a WebKit browser to http://127.0.0.1:9999"
The only formal documentation on this is located "here":https://lists.webkit.org/pipermail/webkit-qt/2012-April/002646.html
** This post contains a reference to " ./MiniBrowser" and I am not sure what this was for. I searched the latest webkit2 code for qt (QtWebContext.cpp) and there appears to be no logic to handle anything beyond the port.
I found out how to do this from this "thread":http://askubuntu.com/questions/319493/debugging-html5-with-ubuntu-sdk.
There is a recommendation to avoid setting QTWEBKIT_INSPECTOR_SERVER as a global environment variable and this is very wise as doing so would cause any running QtWebKit application to turn on web inspector.

cdietz

Thank you!

I am glad I found this information. Surprisingly, it also works with the new WebView (<QtDir>/Extras/QtWebView) which does not use qtwebkit (at least on OS X where the webview falls back to use the QtWebEngine internally):

@
import QtWebView 1.0 // WebView
import QtWebKit.experimental 1.0

ApplicationWindow {
visible: true
width: 800
height: 600

WebView {
    width: parent.width
    height: parent.height
    experimental.preferences.developerExtrasEnabled: true
    url: "http://qt.io"
}

}
@

cdietz

Thank you!

I am glad I found this information. Surprisingly, it also works with the new WebView (<QtDir>/Extras/QtWebView) which does not use qtwebkit (at least on OS X where the webview falls back to use the QtWebEngine internally):

@
import QtWebView 1.0 // WebView
import QtWebKit.experimental 1.0

ApplicationWindow {
visible: true
width: 800
height: 600

WebView {
    width: parent.width
    height: parent.height
    experimental.preferences.developerExtrasEnabled: true
    url: "http://qt.io"
}

}
@

mlvljr

P.S. If anyone is puzzled with why debugging does not work on Windows, use this "full" magic link -- and it will:
http://127.0.0.1:1111/webkit/inspector/inspector.html?page=1
(reason behind the issue probably being Windows inspector not doing redirects the same way it does on Linux, for some reason)

;)

mlvljr

P.S. If anyone is puzzled with why debugging does not work on Windows, use this "full" magic link -- and it will:
http://127.0.0.1:1111/webkit/inspector/inspector.html?page=1
(reason behind the issue probably being Windows inspector not doing redirects the same way it does on Linux, for some reason)

;)