Prepararse para solucionar problemas
Objetivos de aprendizaje
Después de completar esta unidad, podrá:
- Explicar los beneficios de trabajar con código no minimizado.
- Demostrar cómo obtener componentes web Lightning no minimizados.
- Localizar JavaScript en los componentes web Lightning en DevTools.
- Utilizar una lista de ignorados para enfocarse solamente en el código.
- Habilitar formateadores personalizados para decoradores con proxy.
Los componentes web Lightning tienen retos de JavaScript únicos
Solucionar problemas en JavaScript es una habilidad especial. La solución de problemas en los componentes web Lightning, integrados con JavaScript, es parte de esa habilidad y la mejora. Una de las primeras cosas que se descubre es que los componentes web Lightning están compilados y minimizados. La capacidad de minimizar permite reducir su tamaño y agilizar su descarga en el navegador. Sin embargo, también hace que sea un reto a la hora de la solución de problemas. El código minimizado es especialmente difícil de manejar porque se eliminan los saltos de línea y se cambian los nombres de las variables.
Antes de comenzar
Las funciones de las herramientas para desarrolladores son similares en la mayoría de los navegadores. En este módulo, nos centramos en Chrome DevTools. Configuremos un entorno para poder explorar DevTools.
Suponemos que su entorno de desarrollo de Salesforce DX está configurado y que le resulta cómodo utilizarlo para crear componentes web Lightning e implementarlos en una organización. Si todavía no está familiarizado con este proceso, complete el proyecto Inicio rápido: Componentes web Lightning antes de continuar en este módulo.
Siga el proceso con Trail Together
¿Desea seguir el proceso con expertos a medida que realiza este paso? Eche un vistazo a este video, parte de la serie Trail Together en Trailhead Live. Encontrará un vínculo a la sesión completa en la sección Recursos.
Configurar el entorno de solución de problemas
Primero, debe configurar un Trailhead Playground con un par de componentes web Lightning y prepararlo para la solución de problemas.
¿Todo listo para pasar a la práctica con los componentes web Lightning?
Cree un nuevo Trailhead Playground ahora para seguirnos y probar los pasos de este módulo. Desplácese a la parte inferior de esta página, haga clic en el nombre del playground y, luego, seleccione Create Playground (Crear Playground). Crear un nuevo Trailhead Playground lleva a Salesforce normalmente entre 3 y 4 minutos. También utiliza el playground cuando es el momento de completar los retos prácticos.
Habilitar el modo de depuración
Este paso único facilita mucho la solución de problemas en el código. Si bien los componentes web Lightning siguen compilados, si el modo de depuración está habilitado en la organización, estos no se minimizan. Por lo tanto, los nombres de las variables siguen siendo los mismos y la estructura general del código se mantiene, lo que hace que solucionar problemas sea mucho más fácil.
- En Setup (Configuración), ingrese
Debug Mode
(Modo de depuración) en el cuadro Quick Find (Búsqueda rápida) y, a continuación, seleccione Debug Mode (Modo de depuración).
- Seleccione la casilla junto a su usuario.
- Haga clic en Enable (Activar).
Deshabilitar el almacenamiento en caché durante el desarrollo
Deshabilite la opción de almacenamiento en caché seguro y persistente del navegador para ver el efecto de todos los cambios de código sin vaciar la memoria caché.
La opción de almacenamiento en caché mejora el desempeño de recarga de la página, ya que evita las idas y vueltas adicionales al servidor.
- En Setup (Configuración), ingrese
Session
(Sesión) en el cuadro Quick Find (Búsqueda rápida) y después seleccione Session Settings (Configuración de la sesión).
- Anule la selección de la casilla de verificación Enable secure and persistent browser caching to improve performance (Activar el almacenamiento en caché seguro y persistente para aumentar el desempeño).
- Haga clic en Save (Guardar).
Después de deshabilitar la opción de almacenamiento en caché del navegador, puede volver a cargar una página para probar los cambios en el código sin borrar la memoria caché. Recomendamos que vuelva a habilitar la opción de almacenamiento en caché del navegador después de depurar el código.
Obtener los componentes web Lightning desde GitHub
- Complete las instrucciones en el archivo readme del repositorio de GitHub.
- Desde el Iniciador de aplicación (
) en su zona de pruebas, encuentre y abra Solutions en Items (Elementos).
Su entorno ahora está listo para solucionar problemas con DevTools del navegador.
Verifique su comprensión de los puntos clave de esta sección con estas tarjetas nemotécnicas.
Lea la pregunta o el término de cada tarjeta y, a continuación, haga clic en la tarjeta o tóquela para mostrar la respuesta correcta. Haga clic en la flecha hacia la derecha para pasar a la tarjeta siguiente y en la flecha hacia la izquierda para regresar a la tarjeta anterior.
Abrir DevTools
Analicemos la aplicación Solutions con Chrome DevTools.
- Desde el Iniciador de aplicación (
) en su zona de pruebas, encuentre y abra Solutions en Items (Elementos).
- Haga clic con el botón derecho en la ventana del navegador y seleccione Inspect (Inspeccionar) y, a continuación, haga clic en la ficha Sources (Fuentes).
DevTools contiene el menú DevTools (1) y, cuando está seleccionada la ficha Sources (Fuentes), el panel Sources (Fuentes), el cual contiene lo siguiente:
- El panel del navegador de archivos (2) enumera todos los archivos solicitados de esta página web.
- El panel del editor de código (3) muestra los archivos seleccionados en el Navegador de archivos.
- El panel de depuración de JavaScript (4) contiene la barra de herramientas de control de puntos de interrupción y varias herramientas que puede usar para inspeccionar JavaScript.
Menú DevTools
El menú DevTools tiene varias opciones que permiten ver diferentes partes del navegador. En este módulo, trabajaremos principalmente con Sources (Fuentes) y Console (Consola).
- Utilice el panel Elements (Elementos) para ver y cambiar DOM y CSS.
- Utilice el panel Console (Consola) para leer mensajes, como los que se crean con
console.log()
, interactúe con variables y ejecute JavaScript.
- Utilice el panel Sources (Fuentes) para ver y depurar archivos de JavaScript.
Cambiar la ubicación de DevTools
De manera predeterminada, las herramientas están acopladas a la derecha de la pantalla. Las herramientas también se pueden acoplar a la izquierda o en la parte inferior de la pantalla, o incluso desacoplarse en una ventana por separado.
Haga clic en Customize and control DevTools (Personalizar y controlar DevTools) y seleccione el lado que desea usar para anclar. (Las imágenes en este módulo muestran a DevTools acoplado en la parte inferior).
Habilitar formateadores personalizados
Los componentes web Lightning usan proxies de JavaScript para garantizar que ciertos tipos de datos sean de solo lectura, principalmente los datos que se aprovisionan por medio de decoradores (@api, @track y @wire). En el modo de depuración, los formateadores personalizados manipulan los proxies en partes legibles. Luego, en Chrome DevTools, se ve el valor real en vez del proxy. Habilitemos los formateadores personalizados.
- En DevTools, haga clic en Settings (Configuración)
. Se abrirá la página Preferences (Preferencias).
- En la consola, seleccione Custom formatters (Formateadores personalizados).
Usar la lista de elementos ignorados
La lista de elementos ignorados permite omitir archivos de JavaScript seleccionados cuando se usa DevTools, para que el usuario pueda detenerse solo en las propias excepciones. Esto permite ignorar el código del marco de trabajo donde no quiere solucionar problemas.
- En Settings (Configuración), haga clic en Ignore List (Lista de elementos ignorados).
- Haga clic en Add pattern (Agregar patrón).
- Ingrese
/components/.*.js$
y luego haga clic en Add (Agregar).
- Cierre la configuración.
Localizar los componentes web Lightning
En Sources (Fuentes), los componentes web Lightning se muestran en el navegador de archivos en Page (Página). Todos los componentes web Lightning personalizados para la página actual están en la carpeta modules/c.
- En DevTools, haga clic en la ficha Sources (Fuentes).
- En el navegador de archivos, en Page (Página), expanda lightning/n y después modules/c.
- Haga clic en display.js. El archivo se abre en el editor de código.
- En display.js, busque
class Display
. Haga clic dentro de la ventana Code (Código) y pulse Ctrl+F (Windows) o Cmd+F (macOS). En el cuadro de búsqueda, introduzcaclass Display
.
Observe que el código está compilado, pero no minimizado, así que los nombres de las variables no se cambian.
Verifique su comprensión de los puntos clave de esta sección con estas tarjetas nemotécnicas.
Lea la pregunta o el término de cada tarjeta y, a continuación, haga clic en la tarjeta o tóquela para mostrar la respuesta correcta. Haga clic en la flecha hacia la derecha para pasar a la tarjeta siguiente y en la flecha hacia la izquierda para regresar a la tarjeta anterior.
En la siguiente unidad, empezará a trabajar con estas herramientas nuevas.
Recursos
- Trailhead Live: Trail Together - Solución de problemas en los componentes web Lightning
- Guía para desarrolladores de componentes web Lightning: Habilitar el modo de depuración en Salesforce
- Blog para desarrolladores de Salesforce: Depurar los componentes web Lightning
- Galería de video de componentes web Lightning: Depurar componentes web Lightning
- Blog para desarrolladores de Salesforce: Desarrollar las habilidades de LWC - Parte 1
- Chrome DevTools: Depurar JavaScript
- Chrome DevTools: Descripción general