☰

使用 Ubuntu SDK 调试 HTML5

tag-icon • tag-icon application-development html5 sdk
使用 Ubuntu SDK 调试 HTML5

我读过这个问题： 我可以为 Ubuntu Phone 开发混合原生/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!

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

提前致谢

答案1

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

使用该--inspector参数，应用程序的 shell 输出将显示 IP 地址和端口。您可以在 WebKit 浏览器（例如 chromium-browser）中打开此 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 来执行相同的操作。查看“项目”>“运行设置”区域并按如下方式配置运行配置：

在此处输入图片描述

答案2

诀窍是使用 WebKit 的远程检查器。以下是我在 QtCreator 3.0 中使其运行的方法：

  • 如果您还没有安装 Google Chrome，请下载。（我相信 Safari 也可以。）
  • 在 QtCreator 中，单击左栏中的“项目”，然后单击顶部的“运行”选项卡。
  • 在“运行环境”旁边，单击“详细信息”下拉菜单。
  • 单击“添加”以添加新的环境变量。
  • 设置变量名为QTWEBKIT_INSPECTOR_SERVER并将值设置为任何未使用的本地端口号，例如9999
  • 运行项目
  • 打开 Chrome 并输入以下 URL：http://127.0.0.1:9999

可能需要一点时间才能启动。如果 URL 不起作用，您可以使用 Microsoft TCPView（在 Windows 上）等工具来确保您的进程已打开端口。

在 Qt 中启用远程检查器的技巧来自这篇文章：https://lists.webkit.org/pipermail/webkit-qt/20​​12-April/002646.html

相关内容