Depuración de código en el Visor HTML de Velneo
En Velneo disponemos del control Visor HTML para mostrar contenido en formato HTML. Este control incluye un navegador web completo, basado en el motor de código abierto Chromium.
En muchas ocasiones necesitamos comprobar el funcionamiento del contenido HTML, tanto del CSS, JavaScript y los elementos del DOM.
Herramientas de desarrollo (DevTools) de Chromium
Una de las características del motor Chromium es la posibilidad de acceder a las Herramientas de desarrollo (DevTools) de Chromium.
Las DevTools de Chromium nos permiten inspeccionar y depurar los problemas de diseño y rendimiento de cualquier contenido web.
Esta característica del Visor HTML no está documentado en los manuales de Velneo. Si quieres información desde la plataforma Qt, consulta la documentación sobre el Tipo QML WebEngine.
Iniciar las DevTools de Chromium para una aplicación Velneo
Hay dos formas de probar las DevTools de Chromium en las aplicaciones Velneo que contienen el Visor HTML:
- Usar la opción de la línea de comando --remote-debugging-port=[puerto]
Por ejemplo "%programfiles%\Velneo\vClient.exe" vatps://USU:PASS@127.0.0.1/MiApp --remote-debugging-port=[puerto] - Establecer la variable de entorno QTWEBENGINE_REMOTE_DEBUGGING al valor del puerto que usamos para conectar el Visor HTML con las DevTools de Chromium.
A continuación conectaremos a la url http://localhost:[puerto] desde un navegador del sistema operativo que esté basado en Chromium (Edge, Glooge Chrome, ...)
Por ejemplo, establecemos la Variable de Entorno (Windows) QTWEBENGINE_REMOTE_DEBUGGING al valor del puerto 54241.
Iniciamos la aplicación Velneo con el Visor HTML e introducimos la siguiente URL:
https://c3.velneo.com:10192/miapp_server/index
Abrimos un explorador web con motor Chromium como Edge de Windows o Google Chrome y tecleamos la siguiente URL:
http://localhost:54241
La página del explorador con las DevTools muestra la lista de páginas inspeccionables. Si tenemos más de un Visor HTML visible en la aplicación, se mostrarán las páginas web correspondientes.
Hacemos click sobre la página web que deseamos inspeccionar.
Como podemos ver en la lista de puertos activos se ha establecido una conexión entre las DevTools de Chromium con la aplicación vCient.exe a través del puerto 54241.
Desde los paneles de las DevTools de Chromium ya podemos comprobar y depurar el funcionamiento del código.
Depurar desde VDevelop
Algunos componentes del entorno de desarrollo de Velneo disponen de un Visor HTML para mostrar la ayuda online.
Cada Visor HTML se ejecuta desde el archivo QtWebEngineProcess.exe de la carpeta %programfiles%\Velneo. En el visor de tareas la descripción de este proceso es C++ Application Development Framework.
En vDevelop disponemos además de un Visor HTML con las pestañas de vista previa y editor de código HTML que se muestra desde el directorio Scripts.
Usamos la pestaña Console de las DevTools de Chromium para probar nuestro código HTML.
En la pestaña Scripts del panel de Inspectores de vDevelop crea un fichero con extensión html para que se muestre el editor de código y visor de HTML.
La posibilidad de crear archivos html en la carpeta de scripts del proyecto no está documentado y por lo tanto puede desaparecer el editor de código HTML en futuras versiones.
Usamos el ejemplo disponible en la página que describe la pestaña Console en DevTools de Chromium.
En el código JavaScript se usará el objeto Console del Console API para depurar e interactuar con el código de la página HTML.
Más información en la documentación de las DevTools de Chromium.
Conclusiones
Hemos comprobado cómo el control Visor HTML de Velneo se integra con las DevTools de Chromium usando el explorador web de nuestro sistema operativo. No solo depuramos el código HTML de las aplicaciones en producción, sino que también podemos probar nuestros scripts desde vDevelop antes de la versión definitiva.
Si te atreves con QML échale un vistazo al tipo WebEngineView y las propiedades devToolsView y inspectedView. Podrás tener el Visor HTML y las Herramientas de depuración en el mismo formulario de la aplicación, sin depender de un explorador externo.
Como siempre espero que te haya interesado este tema y que contribuya a hacer más divertida y productiva la programación de aplicaciones.