Depuración de una aplicación web de Oracle JET

Introducción

En este tutorial se muestra cómo depurar una aplicación Oracle JET mediante las herramientas de desarrollador del explorador.

La depuración en un explorador es útil para aislar rápidamente el 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 el origen de JavaScript. Por ejemplo, al ejecutar la aplicación web Oracle JET en el explorador web Google Chrome, puede utilizar las herramientas para desarrolladores de Google Chrome (Chrome DevTools) para examinar el origen de la página y los estilos CSS de cada componente.

Objetivos

Al finalizar este tutorial, aprenderá a utilizar las herramientas de desarrollador web en su explorador para localizar código incorrecto en la aplicación web de Oracle JET, cambiar un archivo de proyecto de ejemplo proporcionado y revisar los cambios activos en el explorador.

Requisitos

Entorno de desarrollo configurado para crear aplicaciones de Oracle JET con el tiempo de ejecución de JavaScript, Node.js y la última interfaz de línea de comandos de Oracle JET instalada
Google Chrome instalado
Finalización de los tutoriales anteriores en esta ruta de aprendizaje, para que haya creado la aplicación web de Oracle JET en la carpeta JET_Web_Application
El ejemplo dashboard.html descargado en el directorio JET_Web_Application/src/ts/views

Tarea 1: ejecutar la aplicación web

Navegue al directorio JET_Web_Application/src/ts/views, cree una copia de seguridad del archivo dashboard.html y, a continuación, descargue el archivo de ejemplo dashboard.html proporcionado en el mismo directorio.
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 realice en los archivos de aplicación existentes. Después de crear nuevos archivos, debe volver a ejecutar la aplicación web.
En la ventana de terminal, desde el directorio JET_Web_Application, ejecute la aplicación.
```
$ ojet serve
```
El explorador muestra el ejemplo con un gráfico comprimido. La lista desplegable Seleccionar gráfico no funciona.

Descripción de la ilustración app-open.png
Si el explorador 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 2: Depuración de la aplicación web

En el explorador de Google Chrome, pulse Ctrl+Shift+I para mostrar la ventana Herramientas de desarrollador. Chrome DevTools muestra el código fuente.
En el panel Elementos, amplíe las etiquetas anidadas hasta que localice el elemento HTML personalizado oj-chart. Tenga en cuenta que el atributo type para el elemento HTML personalizado oj-chart está codificado como bar en lugar de utilizar el valor del elemento HTML personalizado oj-select-single. En el panel Estilos de Chrome DevTools, debajo del diagrama de posición del componente de gráfico, observe también que el atributo width del componente de gráfico está definido en 135 píxeles.

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

El elemento HTML personalizado oj-chart está contenido por un elemento div HTML que define el ancho en 135 px y hace que el componente de gráfico aparezca 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 ancho de estilo del 100%.

Tarea 3: Corregir el código de aplicación web

Navegue al directorio JET_Web_Application/src/ts/views y abra el archivo dashboard.html en un editor.

Busque el elemento HTML personalizado oj-chart. Cambie el tipo de gráfico a [[val]] y elimine las etiquetas <div> que rodean la etiqueta .

. . .
</oj-select-single>
<oj-chart id="barChart" type="[[val]]" data="[[chartDataProvider]]" animation-on-display="auto" 
          animation-on-data-change="auto" hover-behavior="dim" style='width:100%;height:350px;'>
  <template slot="itemTemplate" data-oj-as="item">
. . .

Si aún no está presente, agregue una clase de estilo, chartStyle, al final del archivo appRootDir/src/css/app.css:
```
.chartStyle {
   max-width:500px;
   width:100%;
   height:350px;
}
```
Sustituya el atributo style por el atributo class que hace referencia a las propiedades de estilo en el archivo appRootDir/src/css/app.css.
```
<oj-chart id="barChart" type="[[val]]" . . . style='width:100%;height:350px;'>
```
Se convierte en
```
<oj-chart id="barChart" type="[[val]]" . . . class="chartStyle">
```
Es una buena práctica colocar los estilos que desea aplicar a los componentes en un archivo CSS independiente en lugar de utilizar el atributo style en línea demostrado en el ejemplo anterior.
Para verificar los cambios, guarde el archivo y vea la salida actualizada activa de la aplicación web en el explorador.
Sustituya el archivo de ejemplo por el archivo dashboard.html original.
Cierre la ventana o separador del explorador que muestra la aplicación web 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 el siguiente tutorial.

Más recursos de aprendizaje

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

Para obtener documentación sobre los productos, visite Oracle Help Center.

Título e Información de Copyright

Debug an Oracle JET web app

F53092-01

February 2022