使用 Ubuntu SDK 调试 HTML5

Question

我读到这个问题： 我可以为 Ubuntu 手机开发一个混合原生/HTML5 应用程序吗？

它有一个很好的答案，但 Ubuntu SDK (Ubuntu 13.04) 不再支持它，现在它使用：

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtWebKit 3.0

并且在尝试调用 WebView 的“设置”时会出现一些错误：

Cannot assign to non-existent property "settings"

在网上挖掘我找到了一些解决方案，遗憾的是对我不起作用。

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;
            }
        }
    }
}
}

显示了一些警告，但它开始良好。

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!

虽然没有开发人员工具。右键单击不起作用，也许我遗漏了什么？任何帮助将不胜感激。

提前致谢

Answer 1

从 ubuntu-html5-theme 包版本 14.04.20140123-ppa2 (Trusty) 开始，可以在--inspector添加参数的情况下启动 HTML5 应用程序。（这可以添加到ubuntu-html5-app-launchershell 中的命令并通过在 SDK 中设置运行配置）。

使用该--inspector参数，应用程序的外壳输出会显示 IP 地址和端口。您可以在 WebKit 浏览器（例如，chromium 浏览器）中打开此 URL，您将看到一个“可检查视图”，其中包含一个 JavaScript 控制台，您可以使用该控制台查看警告、错误和调试。这允许您使用您可能已经熟悉的基于浏览器的 HTML 工具。

这是从 shell 启动应用程序的示例：

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

以下是您需要查找的带有 URL 的输出部分：

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

如前所述，您还可以配置 Ubuntu SDK 来做同样的事情。查看项目 > 运行设置区域并像这样配置运行配置：