web-dev-qa-db-fra.com

Débogage HTML5 avec Ubuntu SDK

J'ai lu cette question: Puis-je développer une application hybride native/HTML5 pour le téléphone Ubuntu?

Et il a une excellente réponse, mais qui n'est plus prise en charge dans le SDK Ubuntu (Ubuntu 13.04), il utilise maintenant:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtWebKit 3.0

Et il y a quelques erreurs lorsque vous essayez d'appeler les "paramètres" de WebView:

Cannot assign to non-existent property "settings"

En creusant dans le Web, j'ai trouvé une solution, malheureusement, cela ne fonctionne pas pour moi.

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

Certains avertissements sont affichés mais cela démarre bien.

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!

Aucun outil de développement cependant. Le clic droit ne fonctionne pas, peut-être que je manque quelque chose? Toute aide sera fortement appréciée.

Merci d'avance

application-developmenthtml5sdk
3
victorhqc

L'astuce consiste à utiliser l'inspecteur à distance de WebKit. Voici comment je l'ai fait fonctionner dans QtCreator 3.0:

  • Téléchargez Google Chrome si vous ne l'avez pas déjà. (Je crois que Safari fonctionne également.)
  • Dans QtCreator, cliquez sur "Projets" dans la colonne de gauche, puis cliquez sur l'onglet "Exécuter" en haut.
  • À côté de "Exécuter l'environnement", cliquez sur le menu déroulant "Détails".
  • Cliquez sur "Ajouter" pour ajouter une nouvelle variable d'environnement.
  • Définissez une variable nommée QTWEBKIT_INSPECTOR_SERVER et définissez la valeur sur tout numéro de port local non utilisé, par exemple 9999
  • Exécutez votre projet
  • Ouvrez Chrome et entrez l'URL suivante: http://127.0.0.1:9999

Cela peut prendre un moment avant d'arriver. Si l'URL ne fonctionne pas, vous pouvez utiliser un outil comme Microsoft TCPView (sous Windows) pour vous assurer que votre processus a le port ouvert.

L'astuce pour activer l'inspecteur distant dans Qt vient de ce post: https://lists.webkit.org/pipermail/webkit-qt/2012-April/002646.html

2
MrEricSir

À partir de la version 14.04.20140123-ppa2 du package de thème ubuntu-html5 (Trusty), on peut lancer l'application HTML5 avec le --inspector argument ajouté. (Cela peut être ajouté au ubuntu-html5-app-launcher dans le shell et en définissant la configuration d'exécution dans le SDK).

Avec le --inspector argument, la sortie Shell de l'application affiche une adresse IP et un port. Vous pouvez ouvrir cette URL dans un navigateur WebKit (navigateur chrome, par exemple) et vous verrez une "vue inspectable" qui comprend une console JavaScript que vous pouvez utiliser pour voir les avertissements, les erreurs et le débogage. Cela vous permet d'utiliser des outils HTML basés sur un navigateur que vous connaissez peut-être déjà.

Voici un exemple de lancement de l'application à partir du shell:

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

Voici la partie de la sortie avec l'URL que vous devez trouver:

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

Comme indiqué, vous pouvez également configurer le SDK Ubuntu pour faire la même chose. Consultez la zone Projets> Paramètres d'exécution et configurez la configuration d'exécution comme suit:

enter image description here

5
kyleN