Prepararse para la solución de problemas

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Explicar las ventajas de trabajar con código sin minificar.
Demostrar cómo conseguir componentes web Lightning sin minificar.
Localizar el código JavaScript de componentes web Lightning en DevTools.
Utilizar una lista de elementos ignorados solo en su código.
Activar formatos personalizados para decoradores con intermediario.

Nota

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Los componentes web Lightning presentan desafíos únicos de JavaScript

Solucionar problemas de JavaScript es una habilidad específica. La solución de problemas con componentes web Lightning desarrollados con JavaScript requiere esa habilidad y, de hecho, se basa en ella. Una de las primeras cosas que descubre es que los componentes web Lightning se compilan y se minifican. La minificación los convierte en elementos más pequeños y rápidos para que se carguen bien en el navegador. Pero también hace que sea más difícil resolver sus problemas. El código minificado es especialmente difícil de manipular porque se eliminan los saltos de línea y se cambian los nombres de variables.

Antes de comenzar

La mayoría de navegadores incluyen herramientas para desarrolladores con funciones similares. En este módulo nos centraremos en las herramientas de Chrome. Vamos a configurar un entorno para que pueda explorar DevTools.

Se presupone que tiene configurado un entorno de desarrollo de Salesforce DX y que tiene experiencia utilizándolo para desarrollar componentes web Lightning e implementarlos en una organización. Si todavía no está familiarizado con este proceso, complete el proyecto Inicio rápido: Lightning Web Components antes de continuar con el 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 vídeo, parte de la serie Trail Together en Trailhead Live. Encontrará un vínculo a la sesión completa en la sección Recursos.

Configurar un entorno de solución de problemas

En primer lugar, debe configurar un Trailhead Playground con un par de componentes web Lightning y prepararlo para la solución de problemas.

¿Listo para practicar con Lightning Web Components

Cree un nuevo Trailhead Playground ahora para seguirnos y probar los pasos de este módulo. Desplácese hasta el final de esta página, haga clic en el nombre del Playground y seleccione Create Playground (Crear Playground). Normalmente, Salesforce tarda entre 3 y 4 minutos en crear un Trailhead Playground. También utiliza el Playground cuando es el momento de completar los retos prácticos.

Sí, nos referimos a un Trailhead Playground completamente nuevo. Si utiliza un Playground o una organización existentes, puede tener problemas a la hora de completar los retos.

Activar el modo de depuración

Con este paso, la solución de problemas con el código es mucho más sencilla. Aunque los componentes web Lightning se compilan, con el modo de depuración activado en la organización, no se minifican. De esta forma, los nombres de variables se conservan, así como la estructura general del código, por lo que es mucho más sencillo solucionar problemas.

En Setup (Configuración), escriba 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).

Desactivar el almacenamiento en caché durante las tareas de desarrollo

Desactive el almacenamiento en caché persistente y seguro en el navegador para ver el efecto de los cambios en el código sin tener que vaciar la caché.

El ajuste de almacenamiento en caché mejora el rendimiento al volver a cargar las páginas, ya que evita los recorridos adicionales de ida y vuelta al servidor.

En Setup (Configuración), escriba Session (Sesión) en el cuadro Quick Find (Búsqueda rápida) y, a continuación, seleccione Session Settings (Configuración de la sesión).
Anule la selección de la casilla Enable secure and persistent browser caching to improve performance (Activar el almacenamiento en caché seguro y persistente para mejorar el rendimiento).
Haga clic en Save (Guardar).

Después de desactivar el almacenamiento en caché en el navegador, puede volver a cargar una página para probar los cambios en el código sin borrar la caché. Le recomendamos volver a activar el almacenamiento en caché después de depurar el código.

Obtener los componentes web Lightning desde GitHub

Complete las instrucciones descritas en el repositorio readme de GitHub.
Desde App Launcher (Iniciador de aplicación), en el Playground, busque y abra Solutions (Soluciones) (debajo de Items [Elementos]).

Ahora, su entorno está listo para solucionar problemas con las herramientas para desarrolladores del navegador.

Compruebe que ha entendido los puntos clave de esta sección con estas tarjetas interactivas.

Lea la pregunta o el término de cada tarjeta y haga clic en ella o tóquela para revelar la respuesta correcta. Haga clic en la flecha hacia la derecha para pasar a la siguiente tarjeta y en la flecha hacia la izquierda para volver a la tarjeta anterior.

Abrir DevTools

Echemos un vistazo a la aplicación Solutions (Soluciones) con la herramienta DevTools de Chrome.

Desde App Launcher (Iniciador de aplicación), en el Playground, busque y abra Solutions (Soluciones) (debajo de Items [Elementos]).
Haga clic con el botón derecho en la ventana del navegador y seleccione Inspect (Inspeccionar). Luego, haga clic en la ficha Sources (Orígenes).

Hay varias formas de abrir DevTools en Chrome.

Desde el menú, haga clic en Customize and control Google Chrome| More tools | Developer tools (Personalizar y controlar Google Chrome | Más herramientas | Herramientas de desarrollador) y seleccione Sources (Orígenes).

Pulse F12 o Ctrl+Mayús+I (Windows) o Comando+Opción+I (macOS).

Aplicación Solutions (Soluciones) con DevTools abierto. Elementos destacados que se corresponden con la descripción siguiente.

DevTools contiene el menú de DevTools (1) y, cuando la ficha Sources (Orígenes) está seleccionada, el panel Sources (Orígenes), que contiene lo siguiente:

El panel File Navigator (Navegador de archivos) (2), donde se ven todos los archivos solicitados desde esta página web.
El panel Code Editor (Editor de código) (3), donde se ven los archivos seleccionados en el navegador de archivos.
El panel JavaScript Debugging (Depuración de JavaScript) (4), que contiene la barra de herramientas de control de puntos de interrupción y varias herramientas para inspeccionar el código JavaScript.

El menú de DevTools incluye varias opciones que permiten ver distintas partes del navegador. En este módulo, vamos a trabajar sobre todo con los paneles de orígenes y la consola.

Utilice el panel Elements (Elementos) para ver y cambiar el DOM y las CSS.
También puede usar el panel Console (Consola) para leer mensajes, como los que se crean con console.log(), interactuar con variables y ejecutar JavaScript.
Utilice el panel Sources (Orígenes) para ver y depurar archivos JavaScript.

Cambiar la ubicación de DevTools

De forma predeterminada, las herramientas aparecen ancladas a la derecha de la pantalla. También se pueden anclar a la izquierda o en la parte inferior de la pantalla, o incluso en una ventana independiente.

Haga clic en la opción para personalizar y controlar DevTools () y seleccione el lado en el que quiere que se acoplen las herramientas. (En las imágenes de este módulo, DevTools está anclado en la parte inferior).

Los botones con las opciones de anclaje son Undock into separate window (Anclar en otra ventana), Dock to left (Anclar a la izquierda), Dock to bottom (Anclara en la parte inferior) y Dock to right (Anclar a la derecha).

Activar formatos personalizados

Los componentes web Lightning utilizan intermediarios de JavaScript para hacer que determinados tipos de datos sean de solo lectura, principalmente datos que se aprovisionan mediante decoradores (@api, @track, @wire). En el modo de depuración, los formatos personalizados manipulan los intermediarios para convertirlos en partes legibles. Luego, en Chrome DevTools, puede ver el valor real en lugar del intermediario. Vamos a activar los formatos personalizados.

En DevTools, haga clic en Settings (Configuración, ). Se abre la página Preferences (Preferencias).
En Console (Consola), seleccione Custom formatters (Formatos personalizados).

Utilizar la lista de elementos ignorados

La lista de elementos ignorados permite ignorar los archivos JavaScript seleccionados cuando se use DevTools, de forma que solo se pause en las excepciones que usted decida. Esto permite ignorar código del marco en el que no tiene problemas que solucionar.

En Settings (Configuración), haga clic en Ignore List (Lista de elementos ignorados).
Haga clic en Add pattern (Agregar patrón).
Escriba /components/.*.js$ y haga clic en Add (Agregar).
Cierre Settings (Configuración).

Localizar los componentes web Lightning

En Sources (Orígenes), los componentes web Lightning aparecen en File Navigator (Navegador de archivos), debajo de Page (Página). Todos los componentes web Lightning personalizados de la página actual están en la carpeta modules/c.

En DevTools, haga clic en la ficha Sources (Orígenes).
En File Navigator (Navegador de archivos), en Page (Página), expanda lightning/n y luego modules/c.

Haga clic en display.js. El archivo abre Code Editor (Editor de código).

En display.js, busque class Display. (Haga clic dentro de la ventana del código y pulse Ctrl+F en Windows o Comando+F en macOS). En el cuadro Find (Buscar), escriba class Display.

Observe que el código se compila, pero no se minifica, así que los nombres de las variables no cambian.

Si solo ve unas cuantas líneas de código en el archivo JavaScript, significa que en la organización no está activado el modo de depuración. Si al activar el modo de depuración no se restablece el código en el editor, fuerce otra carga: Con DevTools abierto, haga clic con el botón derecho en el botón Reload (Volver a cargar) del navegador y luego haga clic en Hard Reload (Forzar carga).

Compruebe que ha entendido los puntos clave de esta sección con estas tarjetas interactivas.

Empezará a trabajar con estas nuevas herramientas en la siguiente unidad.

Estimación de tiempo

Temas

¿Necesita ayuda?

Recursos de Salesforce Platform