用Ubuntu调试HTML5

Question

我读了这个问题：我能为Ubuntu手机开发一个混合的本地/HTML5 5 5应用程序吗？

它有一个很好的答案，但是在Ubuntu (Ubuntu13.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

诀窍是使用WebKit的远程检查器。下面是我如何在QtCreator 3.0中使用它：

• 下载谷歌Chrome，如果你还没有它。(我相信Safari也有效。)
• 在QtCreator中，单击左侧列中的"Projects“，然后单击顶部的"Run”选项卡。
• 在“运行环境”旁边，单击“详细信息”下拉列表。
• 点击“添加”添加一个新的环境变量。
• 设置一个名为QTWEBKIT_INSPECTOR_SERVER的变量，并将值设置为任何未使用的本地端口号，例如9999
• 运行您的项目
• 打开Chrome并输入以下网址：http://127.0.0.1:9999

可能需要一段时间才能出现。如果URL不起作用，您可以使用像Microsoft TCPView这样的工具(在Windows上)来确保您的进程打开端口。

在Qt中启用远程检查器的诀窍来自于以下文章：https://lists.webkit.org/pipermail/webkit-qt/2012-April/002646.html

Answer 2

从ubuntu 5主题包版本14.04.20140123-ppa 2开始，我们可以通过添加HTML5参数启动--inspector应用程序。(这可以添加到shell中的ubuntu-html5-app-launcher命令中，并通过在SDK中设置run配置来实现)。

使用--inspector参数，应用程序的shell输出显示一个IP地址和端口。您可以在WebKit浏览器(例如铬浏览器)中打开这个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来执行相同的任务。请查看项目> Run区域，并配置运行配置如下：