Qt5 QML QtWebKit 3.0 JS Console



  • 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?



  • 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.


  • 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"
    }
    

    }
    @



  • 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"
    }
    

    }
    @



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

    ;)



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

    ;)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.