Prepararse para la solución de problemas

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Crear grabaciones de un perfil de rendimiento.
  
• Inspeccionar la pila de llamadas para detectar problemas.
  
• Demostrar cómo seleccionar una parte de la grabación de un perfil.
  
• Utilizar el Administrador de tareas de Chrome para finalizar procesos.
  

Solución de problemas de rendimiento de Lightning Web Components

Con rendimiento nos referimos a lo rápido que es un sitio. Salesforce usa la métrica de tiempo de carga de páginas experimentado (EPT) en Lightning para medir el tiempo de carga de las páginas. La idea es medir cuánto tarda en cargarse una página para garantizar que esté en buen estado de forma que un usuario pueda interactuar sin problemas con ella. El objetivo de la mayoría de páginas es tener un tiempo de carga inferior a 3 segundos.

La solución de problemas con el rendimiento de componentes web Lightning puede tener numerosas variantes. La métrica EPT es un indicador general del rendimiento de una página. Si quiere profundizar aún más en problemas de rendimiento, debe tener en cuenta tres áreas principales.

• El rendimiento de la red
  
• El rendimiento del navegador
  
• La complejidad y el nivel de personalización de la página
  

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.

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.

Para este módulo es necesario que tenga los conocimientos sobre Chrome DevTools (las herramientas para desarrolladores de Chrome) que se presentan en el módulo anterior de esta ruta: Solucionar problemas de Lightning Web Components. De hecho, si acaba de completar esa insignia, el Playground debería estar preparado con el código de GitHub necesario para este módulo.

Si ha completado la insignia Solucionar problemas de Lightning Web Components, compruebe que cuenta con el código más reciente de GitHub.

1. En Visual Studio Code, abra el proyecto troubleshoot-lwc.
   

• Haga clic en File (Archivo) > Open (Abrir) (en macOS) o File (Archivo) > Open Folder (Abrir carpeta) (en Windows) y seleccione el directorio troubleshoot-lwc.
  

2. Pulse Control + Mayús + P (en Windows) o Comando + Mayús + P (en macOS) para abrir la Paleta de comandos.
   
3. Escriba git.
   
4. Seleccione Git: Pull.
   
5. En el directorio force-app/main/default, abra el directorio permissionsets.
   
6. Compruebe que está presente el archivo Bad_Bunch_Full_Access.permissionset-meta.xml.
   
7. Haga clic con el botón derecho en la carpeta default en force-app/main.
   
8. Seleccione SFDX: Deploy Source to Org (SFDX: Implementar código fuente en la organización).
   
9. Haga clic en View (Ver) > Terminal (Terminal).
   
10. Asigne el conjunto de permisos Bad Bunch Full Access (Acceso total a Bad Bunch) al usuario predeterminado mediante la ejecución del siguiente comando en el terminal:
    sf org assign permset -n Bad_Bunch_Full_Access.
    
11. Pase a la sección Empezar con un navegador vacío.
    

Configurar un entorno de solución de problemas

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

¿Listo para practicar con Lightning Web Components

No existe un reto práctico en este módulo, pero puede practicar los pasos en su Trailhead Playground. Haga lo siguiente para acceder a su Playground. Primero, asegúrese de iniciar sesión en Trailhead. A continuación, haga clic en su avatar de usuario de la esquina superior derecha de esta página y seleccione Hands-on Orgs (Organizaciones de prácticas) desde el menú desplegable. Haga clic en Launch (Iniciar) junto a la organización que desea abrir. Si, por el contrario, quiere crear un nuevo Playground, haga clic en Create Playground (Crear Playground).

Activar el modo de depuración

Con este paso, la solución de problemas con el código es mucho más sencilla. Al tener activado el modo de depuración en la organización, el código no se minifica. 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.

1. 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).
   
2. Seleccione la casilla junto a su usuario.
   
3. Haga clic en Enable (Activar).
   

Obtener los componentes web Lightning desde GitHub

1. Complete las instrucciones descritas en el repositorio readme de GitHub.
   
2. En Visual Studio Code, asigne el conjunto de permisos Bad Bunch Full Access (Acceso total a Bad Bunch) al usuario predeterminado mediante la ejecución del siguiente comando en el terminal.
   sf org assign permset -n Bad_Bunch_Full_Access.
   

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

Empezar con un navegador vacío

1. Abra el navegador Chrome en modo de incógnito o de invitado.
   De esta forma, Chrome se abrirá de cero sin extensiones instaladas. Las extensiones pueden generar incoherencias a la hora de medir el rendimiento.
   

• Haga clic en la opción para personalizar y controlar Google Chrome () y seleccione Nueva ventana de incógnito.
  

2. Abra su Playground.
   
3. Asegúrese de que el modo de depuración esté activado para su usuario.
   Además, se mostrará la métrica EPT en el navegador.
   
   

También puede ver la métrica EPT con el sufijo de URL "?eptVisible=1".

Solucionar problemas de bloqueo en Chrome

Los ejemplos de Lightning Web Components de esta insignia pueden provocar que el navegador se bloquee o incluso dañar Chrome. Hay una herramienta muy útil que permite cerrar una pestaña que no responde. Echemos un vistazo.

1. Haga clic con el botón derecho en una zona vacía de la sección de pestañas en Chrome y seleccione Administrador de tareas.
   
   
2. Haga clic en un elemento del Administrador de tareas para mostrar la opción Finalizar proceso.
   
   

Ahora que conocemos una manera de salir de un proceso atascado, avancemos. 

Abrir la pestaña de rendimiento DevTools

Echemos un vistazo a la aplicación Bad Bunch en la pestaña de rendimiento de las DevTools de Chrome.

1. Desde App Launcher (Iniciador de aplicación, ) del Playground, busque y abra Bad Bunch.
   
2. Haga clic con el botón derecho en la ventana del navegador y luego haga clic en Inspeccionar.
   
3. 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 se muestra en una ventana independiente).
   
   Tener DevTools abierto en otra ventana permite un mejor acceso a todos los datos durante la solución de problemas.
   
4. Seleccione la pestaña Performance (Rendimiento).
   
   

Opciones de rendimiento

Hay numerosas opciones e información que se pueden reunir en el área Performance (Rendimiento). En este módulo veremos algunas.

Grabar un perfil

1. Con la aplicación Bad Bunch abierta, en la pestaña Performance (Rendimiento) de DevTools, haga clic en Record (Grabar, ).
   Observe que el icono se vuelve de color rojo y la ventana de estado muestra los botones Status: Profiling (Estado: Creando perfil) y Stop (Detener).
   
   
2. En la aplicación Bad Bunch, haga clic en Do Something (Hacer algo).
   Espere que aparezca el tiempo que se ha tardado en ejecutar la acción. Es probable que tarde un poco y que el navegador esté prácticamente bloqueado mientras procesa la solicitud.
   
   
3. Ahora haga clic en Do Something Faster (Hacer algo más rápido).
   Aparecerá el tiempo mucho más rápido.
   
   
4. En el panel Performance (Rendimiento), haga clic en Stop (Detener) en la ventana de estado.
   La grabación se detendrá. A continuación, los datos se procesan y aparecen los resultados en el panel Performance (Rendimiento).
   
   ¡Cuanta información!
   

Navegar por la sección Performance (Rendimiento) puede resultar algo confuso. Si se desplaza con el ratón, podrá ampliar y reducir el contenido en lugar de desplazarse hacia arriba y hacia abajo. Estos son los comandos básicos.

• Utilice la rueda del ratón o el trackpad para ampliar y reducir contenido.
  
• Haga clic y arrastre donde quiera en la IU para desplazarse hacia arriba, hacia abajo y hacia los lados.
  
• Haga clic y arrastre en la barra de desplazamiento para desplazarse hacia arriba y hacia abajo.
  
• Utilice las teclas WASD para ampliar y reducir, y desplazarse hacia la derecha o la izquierda (o las teclas equivalentes si su teclado es distinto).
  
• Utilice las teclas de flecha hacia arriba y hacia abajo para cambiar de categoría y las de izquierda y derecha para expandirlas o contraerlas.
  

5. Los colores que se usan en el gráfico de la CPU se usan también en el panel Summary (Resumen) bajo los gráficos.
   
   Observe el color más destacado del gráfico de la CPU. Es un indicador fuerte de que existe un posible problema. Si observamos el color correspondiente en el panel Summary (Resumen), vemos que el color más fuerte lo tiene Scripting (Creación de scripts).
   
6. Abra la sección Main (Principal) para ver la pila de llamadas JavaScript de los eventos a medida que se activaban.
   
   Las barras representan los eventos y el tamaño muestra el tiempo que se tardaron en ejecutar. Durante la formación de la fila, el evento superior generó el evento inferior. Es fundamental entender la naturaleza de subproceso único de JavaScript para solucionar problemas con el rendimiento de Lightning Web Components.
   
7. Seleccione un evento para ver sus detalles en el panel Summary (Resumen).
   
   Observe que este en concreto es el evento invokeListenersByPlacement de aura (se encuentra en el archivo aura_proddebug.js en la línea 516). Forma parte del código base de Lightning, no del problema que quiere solucionar.
   
8. Seleccione uno de los eventos runExpensiveLoop.
   
   Parece que se ha ejecutado un montón de veces, pero los datos pueden ser engañosos. DevTools utiliza un proceso de ensayo y error para determinar cómo se van a mostrar los resultados. Sin embargo, esto es nuestro código, no un evento de aura.
   
9. En el panel Summary (Resumen), haga clic en el vínculo del archivo example1_Loop.js. Le llevará al panel Sources (Orígenes) con el código resaltado y el tiempo de ejecución.
   
   En la línea 99 puede ver que el análisis de la cadena JSON del bucle está tardando demasiado.
   
10. Vuelva a la pestaña Performance (Rendimiento) y asegúrese de hacer clic en un espacio en blanco de la sección Main (Principal) para borrar la selección de runExpensiveLoop.
    
11. Junto a la pestaña Summary (Resumen), seleccione Bottom-Up (Orden ascendente).
    
    Esta es otra manera de ver qué operaciones están tardando más en ejecutarse. En el panel Bottom-Up (Orden ascendente) solo se ven los eventos de la parte seleccionada de la grabación. Veamos cómo funciona el clic sobre el botón Do Something Faster (Hacer algo más rápido).
    

Seleccionar la parte de la grabación con la que se quiere trabajar

1. Desplace el ratón hacia la derecha o hacia la izquierda en la sección Overview (Información general), es decir, el área con los gráficos de FPS, CPU y NET, para ver la captura de pantalla de ese momento de la grabación.
   
   
2. Haga clic y arrastre el ratón por la sección de la grabación que desea seleccionar.
   Seleccione el área del clic sobre el botón Do Something Faster (Hacer algo más rápido).
   
   Verá que es una sección mucho más pequeña de la grabación.
   

Su grabación será distinta a estas debido a las diferencias de capacidades entre los equipos.

3. Haga clic en el evento runOptimalLoop para ver los detalles en el panel Summary (Resumen). Es posible que tenga que seleccionar la pestaña Summary (Resumen) si sigue en el panel Bottom-Up (Orden ascendente).
   
4. Haga clic en el vínculo example1_Loop.js para volver al panel Sources (Orígenes).
   
   Observará que runOptimalLoop es similar a runExpensiveLoop, excepto porque el análisis del archivo JSON se realiza fuera del bucle for en la línea 112. La ejecución del análisis una sola vez fuera del bucle for en la línea 112 solo tarda unos 0,1 segundos, tal y como puede ver en la columna lateral. En la línea 99, donde el análisis se ha ejecutado una y otra vez dentro del bucle, ha tardado unos 4343,3 ms. Eso representa un aumento de 4 000 000 % si comparamos la ubicación del análisis dentro del método. Los tiempos de grabación pueden ser distintos de los de estos resultados.
   
5. Haga clic en Save profile (Guardar perfil, ) para descargar el perfil y guardar una copia, seleccione una ubicación para el archivo JSON y haga clic en Save (Guardar).
   Puede usar la opción Load profile (Cargar perfil, ) para cargarlo más tarde.
   

En el repositorio clonado de GitHub hay perfiles pregrabados para que pueda consultarlos:

• Haga clic en Load profile (Cargar perfil) y vaya a su proyecto de DX.
  
• Abra la carpeta profiles (perfiles) y seleccione Example-1-Loop-profile.json.
  

En la siguiente unidad veremos otros ejemplos de Lightning Web Components.

Recursos

• Blog de desarrolladores de Salesforce: Understanding Experienced Page Time (Descripción del tiempo de carga de páginas experimentado)
• Blog de desarrolladores de Salesforce: Lightning Web Components Performance Best Practices (Prácticas recomendadas de rendimiento de Lightning Web Components)
• Trailhead: Optimización del rendimiento de Lightning Experience
• Desarrolladores de Chrome: Analiza el rendimiento del entorno de ejecución
• Desarrolladores de Chrome: Referencia de las funciones de rendimiento