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 archivodashboard.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.
-
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 atributotype
para el elemento HTML personalizadooj-chart
está codificado comobar
en lugar de utilizar el valor del elemento HTML personalizadooj-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 atributowidth
del componente de gráfico está definido en135
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 archivodashboard.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 archivoappRootDir/src/css/app.css
:.chartStyle { max-width:500px; width:100%; height:350px; }
-
Sustituya el atributo
style
por el atributoclass
que hace referencia a las propiedades de estilo en el archivoappRootDir/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.