Skip to main content
Únase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regístrese ahora.

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.
Nota

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

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 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.

Nota

Sí, ¡realmente queremos decir un Trailhead Playground completamente nuevo! Si está utilizando una organización o una zona de pruebas existente, pueden surgir problemas a la hora de completar el reto.

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.

  1. 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).
  2. Seleccione la casilla junto a su usuario.
  3. 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.

  1. 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).
  2. 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).
  3. 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

  1. Complete las instrucciones en el archivo readme del repositorio de GitHub.
  2. 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.

  1. Desde el Iniciador de aplicación (Iniciador de aplicación) en su zona de pruebas, encuentre y abra Solutions en Items (Elementos).
  2. 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).
Nota

Hay varias maneras de abrir DevTools en Chrome.

En el menú, haga clic en Customize and control Google Chrome | More tools | Developer tools (Personalizar y controlar Google Chrome | Más herramientas | Herramientas para desarrolladores) y seleccione Sources (Fuentes).

Pulse F12, Ctrl+Shift+I (Windows) o Cmd+Opción+I (macOS).

Aplicación Solutions con DevTools abierto. Las llamadas corresponden a la descripción que sigue.

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).

Los botones de opciones de acoplamiento son: Undock into separate window (Desacoplar en una ventana independiente), Dock to left (Acoplar a la izquierda), Dock to bottom (Acoplar a la parte inferior) y Dock to right (Acoplar a la derecha).

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.

  1. En DevTools, haga clic en Settings (Configuración) “”. Se abrirá la página Preferences (Preferencias).
  2. En la consola, seleccione Custom formatters (Formateadores personalizados).Consola con la opción de formateadores personalizados seleccionada.

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.

  1. En Settings (Configuración), haga clic en Ignore List (Lista de elementos ignorados).
  2. Haga clic en Add pattern (Agregar patrón).
  3. Ingrese /components/.*.js$ y luego haga clic en Add (Agregar).
  4. 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.

  1. En DevTools, haga clic en la ficha Sources (Fuentes).
  2. En el navegador de archivos, en Page (Página), expanda lightning/n y después modules/c.
    Navegador de archivos en Page (Página) con carpetas lightning/n y modules/c expandidas.
  1. Haga clic en display.js. El archivo se abre en el editor de código.Pantalla display.js
  1. 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, introduzca class Display.

Observe que el código está compilado, pero no minimizado, así que los nombres de las variables no se cambian.

Nota

Si ve solo unas pocas líneas de código en el archivo JavaScript, el modo de depuración no está habilitado en la organización. Si al habilitar el modo de depuración no se restablece el código en el editor de código, realice una recarga forzada: con DevTools abierto, haga clic derecho en el botón Reload (Recargar) del navegador y, a continuación, haga clic en Hard Reload (Recarga forzada).

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

Reto práctico

+500 puntos

Prepararse

Completará esta/este unidad en su propia organización de prácticas. Haga clic en Iniciar para empezar a trabajar, o haga clic en el nombre de su organización para seleccionar una diferente.

Su reto

Set Up the Solutions App
If you already deployed the Github repo to your Trailhead Playground, click Check Challenge now to check your work. If not, follow the instructions in the unit to do that now or you won’t be able to complete this challenge.
  • Deploy the GitHub repo to your Trailhead Playground
  • Complete the instructions in the readme GitHub repo and assign the Solutions Full Access Permission Set to the default user.
Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios