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.
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 archivoindex.tsx
y, a continuación, descargue el archivo de ejemploindex.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.
-
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 atributowidth
del componente Gráfico lee135
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 HTMLdiv
que define el ancho en135px
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 estilowidth
de100%
. -
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 propiedadtype
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 enpie
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.
Tarea 4: Corregir el código de aplicación de DOM virtual
-
Navegue al directorio
JET-Virtual-DOM-app/src/styles
y abra el archivoapp.css
en un editor. -
Si aún no está presente, agregue la clase de estilo
chartStyle
al final del archivoappRootDir/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 archivoindex.tsx
en un editor. -
Busque el elemento
oj-chart
y elimine las etiquetas<div style="width:135px;">
que rodean la etiquetaoj-chart
. -
Sustituya el atributo
style
por el atributoclass
que hace referencia a las propiedades de estilo en el archivoappRootDir/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 propiedadtype
para hacer referencia a la variableval
que ha agregado el enlaceuseState
en lugar de la referencia codificada al tipo de gráficofunnel
.<oj-chart id="barChart" type={val} // type="funnel"
Consejo: si lo desea, agregue
funnel
a la matrizchartTypeData
que muestra los tipos de gráfico en el archivoindex.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.
Debug an Oracle JET virtual DOM app
F62131-01
December 2022
Copyright © 2022, Oracle and/or its affiliates.