Depurar de aplicaciones de PWA Kit

Los errores y los problemas de rendimiento son una parte inevitable del desarrollo de aplicaciones web. Con el PWA Kit podrá afrontar estos problemas en profundidad gracias a una variedad de herramientas y técnicas para examinar la aplicación de cerca.

Antes de seguir los consejos más específicos de esta guía, pruebe primero los siguientes pasos generales para la solución general de problemas:

• Compruebe que esté ejecutando una versión admitida del nodo (consulte la guía Primeros pasos) antes de iniciar su servidor de desarrollo local.
• Confirme que su servidor de desarrollo siga funcionando y que el puerto no ha sido tomado por otro proceso.
• Después de hacer un cambio de código, confirme que aparezca el mensaje HTTP development server listening en la terminal antes de actualizar su navegador.
• Busque errores tanto en la consola del navegador como en la terminal.
• Busque las respuestas de error de red con las herramientas de desarrollo de su navegador. (En las DevTools de Chrome, vaya a la pestaña Red).
• Para ayudar a identificar errores de sintaxis y de dedazo, ejecute una herramienta de formateo de código y un linter. En la Retail React App, se proporcionan archivos de configuración para Prettier (herramienta de formateo de código) y para ESLint (linter).
• Compruebe la configuración del antivirus y del firewall de su computadora para ver si hay algo que impida la ejecución del código o que bloquee las solicitudes de red.
• Para identificar y analizar problemas de rendimiento, utilice la herramienta “Profiler” de las DevTools de Chrome. Para obtener más información, consulte esta guía de Google: Análisis del rendimiento en tiempo de ejecución. También puede instalar la extensión de herramientas para desarrolladores de React para Chrome para obtener otra pestaña de “Profiler” desde la que podrá ver información similar pero a nivel de componentes.

Hay dos parámetros de consulta especiales que puede añadir a cualquier URL alimentada por su aplicación de comercio para ayudar a depurar problemas con el código del lado del servidor.

El parámetro de consulta __server_only detiene el proceso de hidratación para que la página aparezca en su navegador exactamente como lo hace después de la renderización del lado del servidor. Ver la versión de la página renderizada del lado del servidor ayuda a solucionar problemas no solo de renderización del lado del servidor, sino también de SEO, ya que los motores de búsqueda rastrean esta versión de la página.

El parámetro de consulta __pretty_print añade formato al objeto __PRELOADED_STATE__ para hacerlo más legible. Este objeto proporciona una captura del estado de la aplicación antes de que comience la hidratación, por lo que puede ser útil para la depuración, para ver si esta contiene los valores esperados. Para ver el contenido del objeto, cargue su aplicación, vea la fuente de la página y busque __PRELOADED_STATE__.

El objeto __PRELOADED_STATE__ se incluye en una etiqueta <script> dentro del código fuente HTML de la página que se solicitó inicialmente cuando la aplicación comienza a ejecutarse del lado del servidor. El objeto __PRELOADED_STATE__ contiene los valores serializados arrojados por la función getProps (incluidas las versiones de getProps que se adjuntan al componente _app y al componente de la página).

Por defecto, el servidor de aplicaciones muestra mensajes de consola en la terminal, pero no permite observar la ejecución del código. Esta limitación puede dificultar la depuración del código que renderiza las páginas en el lado del servidor (o en su máquina local).

Para mejorar la depuración, puede iniciar el servidor de desarrollo local con un comando alternativo que ejecuta un proceso de inspección en el nodo al que se puede adjuntar un depurador. (Para obtener más información, consulte la Documentación del nodo).

Puede adjuntar el depurador incluido en muchos navegadores y editores de texto populares al proceso de inspección del nodo. A continuación se muestran las instrucciones para Google Chrome y Visual Studio Code.

1. Abra una terminal.
2. Vaya al directorio del proyecto.
3. Inicie su servidor local de desarrollo con npm run start:inspect.
4. Para confirmar que el depurador esté escuchando, busque el mensaje “Depurador escuchando” en la salida de la terminal.
5. Abra Chrome e ingrese la URL chrome://inspect.
6. Haga clic en Abrir las DevTools dedicadas para el Nodo.
7. DevTools se abre en una ventana nueva.
8. Para confirmar que el depurador se haya adjuntado, busque el mensaje “Depurador adjunto” en la salida de la terminal.
9. Establezca puntos de quiebre, añada declaraciones de debugger, etc.
10. Cargue una página de su servidor de desarrollo local en Chrome.
11. Utilice la ventana dedicada para la depuración.

Ahora puede rastrear la ejecución del código del lado del servidor.

Para obtener más información sobre la depuración con puntos de quiebre en DevTools, consulte esta guía de Google: Depuración de JavaScript.

1. Abra sus archivos de proyecto en Visual Studio Code.
2. Desde la barra de menú, haga clic en Terminal > Nueva terminal.
3. Inicie su servidor local de desarrollo con npm run start:inspect.
4. Abra la paleta de comandos. Acceso directo en Windows: Ctrl + Shift + P. Acceso directo en Mac: Command + Shift + P.
5. Ingrese el siguiente comando: “Debug: Attach to Node Process.”
6. Aparece una lista de los procesos del Nodo. Seleccione el primero de la lista.
7. Para confirmar que el depurador se haya adjuntado, busque el mensaje “Depurador adjunto” en la salida de la terminal.
8. Establezca puntos de quiebre, añada declaraciones de depurador, etc.
9. Cargue una página de su servidor de desarrollo local en su nevegador web.
10. Utilice el depurador integrado en Visual Studio Code para la depuración.

Ahora puede rastrear la ejecución del código del lado del servidor en Visual Studio Code.

Cuando su aplicación se implementa en Managed Runtime, no se admite la depuración remota. Sin embargo, puede mostrar el final de los registros para cualquier entorno de Managed Runtime en tiempo real para ayudar a diagnosticar errores del lado del servidor.

Tiene dos opciones para mostrar el final registros usando la línea de comandos.

Si está trabajando dentro de un proyecto de PWA Kit generado desde la versión 2.4.1 o posterior, puede:

• Ver ayuda para el comando de registros: npm run tail-logs -- --help
• Mostrar el final de los registros para un proyecto y entorno específicos: npm run tail-logs -- --environment $ENV_ID

Si está trabajando fuera de un proyecto de PWA Kit, o tiene un proyecto generado desde una versión anterior a la 2.4.1, puede utilizar npx para:

• Ver ayuda para el comando de registros: npx @salesforce/pwa-kit-dev tail-logs --help
• Mostrar el final de los registros para una identificación de entorno y una identificación de proyecto específicas: npx @salesforce/pwa-kit-dev tail-logs --environment $ENV_ID --project $PROJ_ID

Al mostrar el final de los registros, tenga en cuenta las siguientes restricciones:

• Cada sesión para mostrar el final de los registros terminará después de los 60 minutos.
• Cada entorno puede admitir hasta 100 sesiones de muestra del final de los registros activas a la vez, entre todos los usuarios.
• Para mostrar el final de los registros, debe obtener permisos de usuario de desarrollador o administrador para el proyecto de Managed Runtime.