Отладка HTML5 с помощью Ubuntu SDK
Я прочитал этот Вопрос: Могу ли я разработать гибридное нативное приложение / приложение HTML5 для телефона Ubuntu?
И у него отличный ответ, но он больше не поддерживается в 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 ответа
Начиная с версии пакета ubuntu-html5-theme 14.04.20140123-ppa2 (Trusty), можно запустить приложение 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 и настройте конфигурацию запуска следующим образом:
Хитрость в том, чтобы использовать удаленный инспектор 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