Отладка HTML5 с помощью Ubuntu SDK

Я читаю этот Вопрос: Могу ли я разработать гибридное приложение с родным /HTML5 для Ubuntu Phone?

И у него отличный ответ, но он больше не поддерживается в 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!

Нет инструментов разработчика, хотя. Правый щелчок не работает, возможно, я что-то упустил? Любая помощь будет оценена.

заранее спасибо

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/2012-April/002646.html

Начиная с версии 14.04.20140123-ppa2 (Trusty) пакета ubuntu-html5-theme, можно запустить приложение HTML5 с --inspector аргумент добавлен. (Это можно добавить к ubuntu-html5-app-launcher команда в оболочке и путем настройки конфигурации запуска в SDK).

С --inspector В качестве аргумента вывод оболочки приложения показывает IP-адрес и порт. Вы можете открыть этот URL в браузере WebKit (например, chromium-browser), и вы увидите "инспектируемое представление", включающее консоль JavaScript, которую можно использовать для просмотра предупреждений, ошибок и отладки. Это позволяет вам использовать браузерные HTML-инструменты, с которыми вы, возможно, уже знакомы.

Вот пример запуска приложения из оболочки:

$ 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 на то же самое. Проверьте область Projects > Run Settings и настройте конфигурацию запуска следующим образом:

введите описание здесь

Другие вопросы по тегам