Depuración de una aplicación DOM virtual de Oracle JET

Introducción

En este tutorial se muestra cómo depurar una aplicación DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET) con herramientas de desarrollador de explorador.

La depuración en un navegador es útil para aislar rápidamente código problemático y probar soluciones. Todos los exploradores tienen herramientas de desarrollador que puede utilizar para realizar tareas como ver y revisar HTML, hojas de estilo en cascada (CSS) y otros archivos de código fuente en la aplicación DOM virtual de Oracle JET. Además, puede instalar una extensión de navegador Preact que proporciona herramientas de depuración adicionales en las herramientas de desarrollador de su navegador cuando depura su aplicación DOM virtual.

Objetivos

En este tutorial, instalará la extensión Preact browser y aprenderá a utilizar las herramientas de desarrollador web en el explorador para localizar el código incorrecto en la aplicación Oracle JET virtual DOM, cambiar un archivo de proyecto de ejemplo proporcionado y revisar los cambios en directo en el explorador.

Requisitos

Tarea 1: Instalación de Preact DevTools

Una aplicación DOM virtual de Oracle JET incluye, por defecto, la sentencia import para inicializar una conexión a Preact DevTools, una extensión del explorador que proporciona herramientas de depuración adicionales en Chrome DevTools. Instale la extensión del navegador Chrome que Preact proporciona para su descarga en https://preactjs.github.io/preact-devtools/.

Una vez que haya instalado la extensión, verá un separador Preact en Chrome DevTools que proporciona herramientas adicionales para depurar la aplicación DOM virtual, como un visor de jerarquía de componentes.

Separador Preact Developer Tools

Tarea 2: Ejecución de la aplicación Oracle JET Virtual DOM

  1. Navegue hasta el directorio JET-Virtual-DOM-app/src/components/content, cree una copia de seguridad del archivo index.tsx y, a continuación, descargue el archivo de muestra index.tsx proporcionado en el mismo directorio.

  2. Si el trabajo por lotes del servidor de herramientas de Oracle JET se está ejecutando en la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes del servidor. El trabajo por lotes del servidor solo reconoce las revisiones que realiza en los archivos de aplicación existentes. Después de crear nuevos archivos, debe volver a ejecutar la aplicación.

  3. En la ventana de terminal, desde el directorio JET-Virtual-DOM-app, ejecute la aplicación.

    npx ojet serve

    El explorador muestra el ejemplo con un gráfico comprimido que no es un gráfico circular ni de barras. La lista desplegable Seleccionar gráfico no funciona.

    Seleccionar lista desplegable Gráfico

  4. Si su navegador predeterminado no es Google Chrome, ábralo y copie la dirección de la página abierta en el campo de dirección URL de Google Chrome.

Tarea 3: Depuración de la aplicación DOM virtual

  1. En el explorador de Google Chrome, haga clic con el botón derecho en el gráfico que aparece en la página y seleccione Inspeccionar en el menú contextual que aparece.

    Chrome DevTools abre y muestra los paneles Elementos y estilos que muestran el HTML y CSS que representan la aplicación DOM virtual.

  2. En el panel Elementos, seleccione el elemento que empieza por <oj-chart id="barChart" y observe cómo, en el separador Estilos, debajo del diagrama de posición del componente Gráfico, el atributo width del componente Gráfico lee 135 píxeles como valor.

    Herramientas de desarrollador de Chrome

    El elemento HTML personalizado oj-chart está contenido por un elemento HTML div que define el ancho en 135px y hace que el componente Chart se vea comprimido en la página. Por lo tanto, el componente Chart hereda su ancho de un contenedor principal e ignora la configuración de estilo width de 100%.

  3. En Chrome DevTools, pulse Ctrl+Shift+P y seleccione Mostrar consola en el menú que aparece.

  4. Introduzca los siguientes comandos para determinar los valores para la propiedad value del componente Select Single y la propiedad type del componente Chart.

    document.getElementById("basicSelect").getProperty('value')
// The Console returns 'pie'
document.getElementById("barChart").getProperty('type')
// The Console returns 'funnel'

    El valor de la propiedad type del componente Gráfico debe coincidir con el valor especificado por el componente Seleccionar Único, pero no lo hace.

  5. Introduzca el siguiente comando para definir el valor de la propiedad type del componente de gráfico en pie en el explorador.

    document.getElementById("barChart").setProperty('type', 'pie')

    El explorador se actualiza para mostrar un gráfico circular. Esto sugiere que debemos examinar el código fuente donde se define la propiedad type del componente Chart.

    Actualizar tipo de gráfico mediante comandos de consola

Tarea 4: Corregir el código de aplicación de DOM virtual

  1. Navegue hasta el directorio JET-Virtual-DOM-app/src/styles y abra el archivo app.css en un editor.

  2. Si aún no está presente, agregue la clase de estilo chartStyle al final del archivo appRootDir/src/css/app.css.

    .chartStyle {
  max-width: 500px;
  width: 100%;
  height: 350px;
}

  3. Navegue hasta el directorio JET-Virtual-DOM-app/src/components/content y abra el archivo index.tsx en un editor.

  4. Busque el elemento oj-chart y elimine las etiquetas <div style="width:135px;"> que rodean la etiqueta oj-chart.

  5. Sustituya el atributo style por el atributo class que hace referencia a las propiedades de estilo en el archivo appRootDir/src/styles/app.css.

    <oj-chart . . .	style="width:100%;height:350px;">

    Convierte

    <oj-chart . . . class="chartStyle">

    Se recomienda colocar los estilos que desea aplicar a los componentes en un archivo CSS independiente en lugar de utilizar el atributo style en línea mostrado en el ejemplo anterior.

  6. En el elemento oj-chart, modifique la propiedad type para que haga referencia a la variable val que ha agregado el enlace useState en lugar de la referencia codificada al tipo de gráfico funnel.

    <oj-chart
   id="barChart"
   type={val}
   // type="funnel"

    Consejo: si lo desea, agregue funnel a la matriz chartTypeData que muestra los tipos de gráfico en el archivo index.tsx.

    const chartTypeData = [
  { value: "bar", label: "Bar" },
  { value: "pie", label: "Pie" },
  { value: "funnel", label: "Funnel" },
];
  7. Para verificar los cambios, guarde su archivo y vea la salida actualizada de la aplicación DOM virtual en su navegador.
  8. Sustituya el archivo de ejemplo por el archivo index.tsx original.
  9. Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual en ejecución.
  10. En la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes de herramientas de Oracle JET.
  11. Deje la ventana de terminal abierta para su siguiente tutorial.

Siguiente paso

Continúe con el siguiente tutorial de este módulo.

Este tutorial forma parte del módulo Su Primera Aplicación Oracle JET Virtual DOM.

Puede volver a la página principal de la ruta de aprendizaje de DOM virtual para acceder a todos los módulos de creación de aplicaciones de DOM virtuales.

Más recursos de aprendizaje

Explore otros laboratorios en docs.oracle.com/learn o acceda a más contenido de aprendizaje gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de Oracle Learning.

Para obtener documentación sobre el producto, visite Oracle Help Center.