3

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

2

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

| improve this answer | |
5

Starting with ubuntu-html5-theme package version 14.04.20140123-ppa2 (Trusty), one can launch the HTML5 app with the --inspector argument added. (This can be added to the ubuntu-html5-app-launcher command in the shell and by setting the run configuration in the SDK).

With the --inspector argument, the app's shell output shows an IP address and port. You can open this URL in a WebKit browser (chromium-browser, for example) and you will see an "inspectable view" that includes a JavaScript console that you can use to see warnings, errors, and to debug. This allows you to use browser-based HTML tools you may already be familiar with.

Here's an example launching the app from the shell:

$ ubuntu-html5-app-launcher --www=HTML5_APP_PROJECT_DIR --inspector

Here is the part of the output with the URL that you need to find:

Inspector server started successfully. Try pointing a WebKit browser to  http://192.168.1.105:9221

As noted, you can also configure the Ubuntu SDK to do the same thing. Check out the Projects > Run Settings area and configure the Run Configuration like this:

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.