Debugging HTML5 Applications with Ubuntu SDK

application-developmenthtml5sdk

I read this Question:
Can I develop a hybrid native/HTML5 app for the Ubuntu Phone?

And it has a great answer, but that is no longer supported in the Ubuntu SDK (Ubuntu 13.04), now it uses:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtWebKit 3.0

And there are some errors when trying to call the "settings" of WebView:

Cannot assign to non-existent property "settings"

Digging in the web I found some solution, sadly doesn't work for me.

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtWebKit 3.0
import QtWebKit.experimental 1.0

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the .desktop filename 
applicationName: "Gastos"

width: units.gu(100)
height: units.gu(75)

Page {
    id: page
    title: "HTML5 App"

    Flickable {
        id: webViewFlickable
        anchors.fill: parent

        WebView {
            experimental.preferences.developerExtrasEnabled: true
            experimental.preferences.javascriptEnabled: true
            id: webView
            anchors.fill: parent
            url: "html/index.html"

            onTitleChanged: {
                page.title = title;
            }
        }
    }
}
}

Some Warnings are shown but it starts well.

WARNING: This project is using the experimental QML API extensions for QtWebKit and is therefore tied to a specific QtWebKit release.

WARNING: The experimental API will change from version to version, or even be removed. You have been warned!

No developer tools though. Right click doesn't work, perhaps I'm missing something? Any help will be greatly appreciated.

Thanks in advance

Best Answer

The trick is to use WebKit's remote inspector. Here's how I got it working in QtCreator 3.0:

  • Download Google Chrome if you don't already have it. (I believe Safari also works.)
  • In QtCreator, click "Projects" in the left column, then click the "Run" tab at the top.
  • Next to "Run Environment", click the "Details" drop-down.
  • Click "Add" to add a new environment variable.
  • Set a variable named QTWEBKIT_INSPECTOR_SERVER and set the value to any unused local port number, for example 9999
  • Run your project
  • Open Chrome and enter the following URL: http://127.0.0.1:9999

It may take a moment to come up. If the URL isn't working you can use a tool like Microsoft TCPView (on Windows) to make sure your process has the port open.

The trick to enabling the remote inspector in Qt comes from this post: https://lists.webkit.org/pipermail/webkit-qt/2012-April/002646.html

Related Question