Prepararse para solucionar problemas

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Crear registros de perfil de desempeño.
  
• Inspeccionar la pila de llamadas para encontrar problemas.
  
• Demostrar cómo se selecciona una parte de un registro de perfil.
  
• Usar el Administrador de tareas de Chrome para finalizar procesos.
  

Componentes web Lightning de solución de problemas de desempeño

El desempeño viene de la perspectiva de la rapidez del sitio. El tiempo de carga transcurrido (EPT) es una métrica de desempeño que Salesforce utiliza en Lightning para medir el tiempo de carga de las páginas. La idea detrás de esta métrica es cronometrar cuánto tarda en cargarse una página para estar en “estado utilizable” para que un usuario pueda interactuar con ella de manera efectiva. El objetivo de la mayoría de las páginas es tardar menos de 3 segundos.

Solucionar los problemas de desempeño de los componentes web Lightning puede llevarlo hacia varias direcciones. EPT es un indicador de alto nivel del desempeño de las páginas. Para profundizar en los problemas de desempeño, hay tres áreas principales a tener en cuenta.

• Desempeño de la red
  
• Desempeño del navegador
  
• Personalización y complejidad de la página
  

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.

Suponemos que su entorno de desarrollo de Salesforce DX está configurado y que está cómodo utilizándolo 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.

Este módulo depende en gran medida de su experiencia con Chrome DevTools del módulo anterior de esta ruta: Solución de problemas de componentes web Lightning. De hecho, si recién completó esa insignia, su zona de pruebas debería estar lista con el código de GitHub que se necesita para este módulo.

Si terminó la insignia Solución de problemas de componentes web Lightning, verifique que tenga 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) (macOS) o File (Archivo) > Open Folder (Abrir carpeta) (Windows) y seleccione el directorio troubleshoot-lwc.
  

2. Abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
   
3. Introduzca git.
   
4. Seleccione Git: Pull (Extraer).
   
5. En el directorio force-app/main/default, abra el directorio permissionsets.
   
6. Verifique que exista 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 fuente en la organización).
   
9. Haga clic en View (Ver) > Terminal.
   
10. Asigne el conjunto de permisos Bad Bunch Full Access al usuario predeterminado. Para ello, debe ejecutar este comando en el terminal:
    sf org assign permset -n Bad_Bunch_Full_Access
    
11. Pase a la sección Comenzar con un navegador limpio a continuación.
    

Configurar el entorno de solución de problemas

En primer lugar, debe configurar un Trailhead Playground con algunos componentes web Lightning y prepararlo para solucionar problemas.

¿Todo listo para pasar a la práctica con los componentes web Lightning?

No existe un reto práctico en este módulo, pero puede probar los pasos en su Trailhead Playground. Así es como debe acceder a su zona de pruebas. En primer lugar, asegúrese de que inició 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. O bien si quiere crear una nueva zona de pruebas, haga clic en Create Playground (Crear Playground).

Habilitar el modo de depuración

Este paso hace que solucionar problemas de código sea mucho más fácil. Con el modo de depuración habilitado en la organización el código no se minimiza. 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).
   

Obtener los componentes web Lightning desde GitHub

1. Complete las instrucciones en el archivo readme del repositorio de GitHub.
   
2. En Visual Studio Code, asigne el conjunto de permisos Bad Bunch Full Access al usuario predeterminado. Para ello, debe ejecutar el siguiente comando en el terminal.
   sf org assign permset -n Bad_Bunch_Full_Access
   

Su entorno ahora está listo para solucionar problemas con DevTools del navegador.

Comenzar con un navegador limpio

1. Abra un navegador de Chrome en modo de incógnito o invitado.
   Esto garantiza que Chrome se ejecuta en un estado limpio, sin extensiones instaladas. Las extensiones pueden crear ruido en sus mediciones de desempeño.
   

• Haga clic en el ícono Customize and control Google Chrome (Personalizar y controlar Google Chrome) () y seleccione New Incognito Window (Nueva ventana de incógnito).
  

2. Abra su zona de pruebas.
   
3. Asegúrese de que Debug Mode (Modo de depuración) esté activado para su usuario.
   Esto también mostrará el EPT en el navegador.
   
   

También se puede obtener la visualización de EPT usando el sufijo de URL "?eptVisible=1".

Arreglar la inmovilización o el bloqueo del navegador de Chrome

Los ejemplos del componente web Lightning de esta insignia pueden hacer que el navegador quede inmovilizado e incluso que Chrome se bloquee. Hay una herramienta ingeniosa que le permite cerrar la ficha si no responde. Echemos un vistazo.

1. Haga clic con el botón derecho en el área vacía de la sección de fichas del navegador de Chrome y seleccione Task Manager (Administrador de tareas).
   
   
2. Haga clic en uno de los elementos del Administrador de tareas para ver la opción End Process (Finalizar proceso).
   
   

Ahora que tenemos una forma de salir de un proceso estancado, pasemos a lo que nos interesa. 

Abrir la ficha DevTools Performance (Desempeño de DevTools)

Observemos la aplicación Bad Bunch con la ficha Chrome DevTools Performance (Desempeño de Chrome DevTools).

1. Desde el Iniciador de aplicación () en su zona de pruebas, encuentre y abra Bad Bunch.
   
2. Haga clic con el botón derecho en la ventana del navegador y haga clic en Inspect (Inspeccionar).
   
3. 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 desanclado en una ventana aparte).
   
   Tener DevTools en una ventana por separado otorga mejor acceso a todos los datos mientras soluciona problemas.
   
4. Seleccione la ficha Performance (Desempeño).
   
   

Opciones de desempeño

Hay muchas opciones e información que se puede recopilar en el área de desempeño. Estas son algunas de las que cubriremos.

Registrar un perfil

1. Con la aplicación Bad Bunch abierta, en la ficha DevTools Performance (Desempeño de DevTools), haga clic en Record (Registro) ().
   Observe que el ícono Record (Registro) se pone de color rojo y la ventana de estado muestra Status Profiling (Perfil de estado) y el botón Stop (Detener).
   
   
2. En la aplicación Bad Bunch, haga clic en Do Something (Hacer algo).
   Espere a que se muestre el tiempo que le llevó la ejecución. Debería tardar un poco, y el navegador básicamente se bloquea mientras realiza la solicitud.
   
   
3. Ahora, haga clic en Do Something Faster (Hacer algo más rápido).
   Mostrará un tiempo mucho más rápido.
   
   
4. En el panel Performance (Desempeño), haga clic en Stop (Detener) en la ventana de estado.
   El registro se detiene. Luego, se procesan los datos y se muestran los resultados en el panel Performance (Desempeño).
   
   ¡Es muchísima información!
   

Navegar en la sección Performance (Desempeño) puede ser un poco confuso. Desplácese con el mouse y, en lugar de desplazarse hacia arriba o hacia abajo, se acercará o se alejará. Estos son los comandos básicos:

• Usar la rueda del ratón o el panel táctil para acercar y alejar
  
• Hacer clic y arrastrar en cualquier lugar de la IU para desplazarse hacia arriba/abajo/izquierda/derecha
  
• Hacer clic y arrastrar la barra de desplazamiento para desplazarse hacia arriba/abajo
  
• Usar las teclas WASD para acercar/alejar y desplazarse hacia la izquierda/derecha (o las teclas equivalentes en su teclado, si fuera diferente)
  
• Usar las teclas hacia arriba/abajo para cambiar las categorías y hacia la izquierda/derecha para expandirlas/contraerlas
  

5. Los colores para el gráfico de CPU se usan en el panel Summary (Resumen) en los gráficos.
   
   Observe el color que llegó al límite máximo en el gráfico de CPU. Eso es un indicador claro de la existencia de posibles problemas. Si observamos el color correspondiente en el panel Summary (Resumen), vemos que Scripting (Secuencia de comandos) superó el límite máximo.
   
6. Abra la sección Main (Principal) para ver la pila de llamadas de JavaScript tal como se realizaron.
   
   Las barras son eventos y el tamaño muestra el tiempo que llevó ejecutarlos. Cuando se organiza la pila, el evento superior ocasiona el evento inferior. Comprender la naturaleza de un solo hilo de JavaScript es fundamental para solucionar problemas de desempeño de LWC.
   
7. Seleccione uno de los eventos para mostrar los detalles en el panel Summary (Resumen).
   
   Observe que este, en particular, es el evento aura invokeListenersByPlacement (es el archivo aura_proddebug.js en la línea 516). Esto forma parte del código base de Lightning, no de lo que está tratando de solucionar.
   
8. Seleccione uno de los eventos runExpensiveLoop.
   
   Parece que se ejecutó un par de veces, pero puede ser confuso. DevTools usa la heurística para determinar la forma en la que se mostrarán los resultados. Sin embargo, este es nuestro código, no un evento de aura.
   
9. En el panel Summary (Resumen), haga clic en el vínculo al archivo example1_Loop.js; lo llevará al panel Sources (Fuentes) con el código resaltado con el tiempo de ejecución.
   
   Puede ver en la línea 99 que el análisis de la cadena JSON en el bucle está demorando demasiado.
   
10. Vuelva a la ficha Performance (Desempeño) y asegúrese de hacer clic en un espacio en blanco en la sección Main (Principal) para borrar la selección de runExpensiveLoop.
    
11. Junto a la ficha Summary (Resumen), seleccione Bottom-Up (Ascendente).
    
    Esta es otra forma de ver qué está llevando más tiempo ejecutar. El panel Bottom-Up (Ascendente) solo muestra eventos para la parte seleccionada del registro. Veamos el botón Do Something Faster (Hacer algo más rápido).
    

Seleccionar la parte del registro con la que desea trabajar

1. Mueva el mouse hacia la derecha o hacia la izquierda en la sección Overview (Visión general), el área con gráficos de FPS, CPU y NET, para mostrar la captura de pantalla para ese tiempo en el registro.
   
   
2. Haga clic y arrastre el mouse por la sección del registro que desea seleccionar.
   Seleccione el área del botón Do Something Faster (Hacer algo más rápido).
   
   Como puede ver, es una sección mucho más pequeña del registro.
   

Su registro se verá diferente debido a las diferencias de las capacidades de las computadoras.

3. Haga clic en el evento runOptimalLoop para ver los detalles en el panel Summary (Resumen). Es probable que deba seleccionar la ficha Summary (Resumen) si todavía está mostrando el panel Bottom-Up (Ascendente).
   
4. Haga clic en el vínculo example1_Loop.js para volver a cambiar al panel Sources (Fuentes).
   
   Puede ver que runOptimalLoop es similar a runExpensiveLoop, excepto que el análisis de JSON ocurre fuera del bucle for (para) en la línea 112. Ejecutar el análisis una sola vez fuera del bucle for en la línea 112 solo lleva ~0.1 s; como se puede ver en la columna lateral. En la línea 99, donde el análisis se ejecutó una y otra vez en el bucle, tardó un total de ~4343.3 ms. ¡Es un aumento de 4 MILLONES por ciento si se compara con la posición del análisis dentro del método! Es posible que sus tiempos de registro varíen con respecto a estos resultados.
   
5. Haga clic en Save profile (Guardar perfil) () para descargar este perfil y guardar una copia. Seleccione una ubicación para el archivo JSON guardado y haga clic en Save (Guardar).
   Puede usar Load profile (Cargar perfil) () para cargarlo más adelante.
   

Hay archivos registrados previamente en el repositorio GitHub clonado para referencia:

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

Veremos algunas otros ejemplos de componentes web Lightning en la próxima unidad.

Recursos

• Blog para desarrolladores de Salesforce: EPT o tiempo de carga transcurrido
• Blog para desarrolladores de Salesforce: Mejores prácticas de desempeño de componentes web Lightning
• Trailhead: Optimización del desempeño de Lightning Experience
• Desarrolladores de Chrome: Analizar el desempeño del tiempo de ejecución
• Desarrolladores de Chrome: Referencia a las funciones de desempeño