Depurando HTML5 com o Ubuntu SDK

Question

Eu li esta pergunta: Posso desenvolver um aplicativo híbrido nativo / HTML5 para o Ubuntu Phone?

E tem uma ótima resposta, mas isso não é mais suportado no Ubuntu SDK (Ubuntu 13.04), agora ele usa:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtWebKit 3.0

E há alguns erros ao tentar chamar as "configurações" do WebView:

Cannot assign to non-existent property "settings"

Procurando na web eu encontrei alguma solução, infelizmente não funciona para mim.

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

Alguns avisos são exibidos, mas começam bem.

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!

Nenhuma ferramenta de desenvolvedor. Clique direito não funciona, talvez eu esteja perdendo alguma coisa? Qualquer ajuda será muito apreciada.

Obrigado antecipadamente

    

Answer 1

O truque é usar o inspetor remoto do WebKit. Aqui está como eu consegui trabalhar no QtCreator 3.0:

• Faça o download do Google Chrome, caso ainda não o tenha. (Eu acredito que o Safari também funciona.)
• No QtCreator, clique em "Projetos" na coluna da esquerda e, em seguida, clique na guia "Executar" na parte superior.
• Ao lado de "Executar ambiente", clique na lista suspensa "Detalhes".
• Clique em "Adicionar" para adicionar uma nova variável de ambiente.
• Defina uma variável denominada QTWEBKIT_INSPECTOR_SERVER e configure o valor para qualquer número de porta local não utilizado, por exemplo 9999
• Execute seu projeto
• Abra o Chrome e digite o seguinte URL: http://127.0.0.1:9999

Pode demorar um pouco para aparecer. Se o URL não estiver funcionando, você poderá usar uma ferramenta como o Microsoft TCPView (no Windows) para garantir que o processo tenha a porta aberta.

O truque para ativar o inspetor remoto no Qt vem desta postagem: link

    

Answer 2

Começando com a versão do pacote ubuntu-html5-theme 14.04.20140123-ppa2 (Trusty), é possível iniciar o aplicativo HTML5 com o argumento --inspector adicionado. (Isso pode ser adicionado ao comando ubuntu-html5-app-launcher no shell e definindo a configuração de execução no SDK).

Com o argumento --inspector , a saída do shell do aplicativo mostra um endereço IP e uma porta. Você pode abrir essa URL em um navegador WebKit (chromium-browser, por exemplo) e verá uma "visualização inspecionável" que inclui um console JavaScript que pode ser usado para ver avisos, erros e depurar. Isso permite que você use ferramentas HTML baseadas em navegador com as quais você já esteja familiarizado.

Veja um exemplo de lançamento do aplicativo a partir do shell:

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

Aqui está a parte da saída com o URL que você precisa encontrar:

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

Como mencionado, você também pode configurar o Ubuntu SDK para fazer a mesma coisa. Confira os projetos > Execute a área Configurações e configure a Configuração de Execução assim: