Depurar 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) mediante herramientas de desarrollador de explorador.

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

Objetivos

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

Requisitos

Un entorno de desarrollo configurado para crear aplicaciones DOM virtuales de Oracle JET con Node.js instalado
Google Chrome instalado
Finalización del tutorial anterior en esta ruta de aprendizaje, Enlace de datos a un componente en una aplicación de DOM virtual de Oracle JET
Ejemplo de index.tsx descargado en el directorio JET-Virtual-DOM-app/src/components/content

Tarea 1: Instalación de Preact DevTools

Una aplicación de DOM virtual de Oracle JET incluye, por defecto, la sentencia de importación para inicializar una conexión a Preact DevTools, una extensión de explorador que proporciona herramientas de depuración adicionales en Chrome DevTools. Instale la extensión del explorador Chrome que Preact proporciona para descargar 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 Herramientas de desarrollador exactas

Descripción de la ilustración preact-tab.png

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

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 ejemplo index.tsx proporcionado en el mismo directorio.
Si el trabajo por lotes del servidor de herramientas 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 de servidor solo reconoce las revisiones que realice en los archivos de aplicación existentes. Después de crear nuevos archivos, debe volver a ejecutar la aplicación.
En la ventana de terminal, desde el directorio JET-Virtual-DOM-app, ejecute la aplicación.
```
npx @oracle/ojet-cli serve
```
El explorador muestra el ejemplo con un gráfico comprimido que no es un gráfico circular o de barras. La lista desplegable Seleccionar gráfico no funciona.

Descripción de la ilustración app-open.png
Si el 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

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.
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 su valor.

Descripción de los estilos de ilustración: tab.png

El elemento HTML personalizado oj-chart está contenido por un elemento HTML div que define el ancho en 135px y hace que el componente de gráfico se vea comprimido en la página. Por lo tanto, el componente de gráfico hereda su ancho de un contenedor principal e ignora la configuración de estilo width de 100%.
En Chrome DevTools, pulse Ctrl+Shift+P y seleccione Mostrar consola en el menú que aparece.
Introduzca los siguientes comandos para determinar los valores de 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 de gráfico debe coincidir con el valor especificado por el componente Seleccionar único, pero no lo hace.
Introduzca el siguiente comando para definir el valor de 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 es necesario examinar el código de origen donde se define la propiedad type del componente de gráfico.

Descripción de la ilustración update-chart-console.png

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

Navegue al directorio JET-Virtual-DOM-app/src/styles y abra el archivo app.css en un editor.
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;
}
```
Navegue al directorio JET-Virtual-DOM-app/src/components/content y abra el archivo index.tsx en un editor.
Busque el elemento oj-chart y elimine las etiquetas <div style="width:135px;"> que rodean la etiqueta oj-chart.
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;">
```
Se convierte en
```
<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.
En el elemento oj-chart, modifique la propiedad type para hacer 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" },
 ];
```
Para verificar los cambios, guarde el archivo y vea la salida actualizada de la aplicación DOM virtual en el explorador.
Sustituya el archivo de ejemplo por el archivo index.tsx original.
Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual en ejecución.
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.
Deje abierta la ventana de terminal para su siguiente tutorial.

Siguiente paso

Para continuar con el siguiente tutorial en esta ruta de aprendizaje, haga clic aquí.

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 Oracle Learning Explorer.

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

Título e Información de Copyright

Debug an Oracle JET virtual DOM app

F62131-01

December 2022