Depura tu app web de Interactive Canvas con las Herramientas para desarrolladores de Chrome

Puedes depurar tu aplicación web de Interactive Canvas con las herramientas para desarrolladores de Chrome. El depurador de Chrome es compatible con las pantallas inteligentes de Google Home o Google Nest cuya versión de software sea 30 o posterior (esta actualización comenzará a lanzarse en octubre de 2020) y la versión de firmware de Cast 1.50 o posterior. Puedes consultar las versiones de System settings / About device en tu pantalla inteligente.

Configura tu entorno

Antes de realizar la depuración, haz lo siguiente para configurar tu entorno de forma correcta:

  • Habilita tu acción para realizar pruebas en el simulador de la Consola de Actions.
  • Conecta tu máquina a la misma red de área local que el dispositivo Google Home o Google Nest que estás probando.
  • Asegúrate de que tu red no bloquee los paquetes entre dispositivos.
  • Accede con la misma Cuenta de Google en la Consola de Actions y en el dispositivo Google Home o Google Nest.

Una vez que el entorno esté listo, puedes iniciar la acción en la pantalla inteligente de prueba.

Conecta la app web de Canvas al depurador

Para conectar la app web de Canvas al depurador de las Herramientas para desarrolladores de Chrome, sigue estos pasos:

  1. En tu máquina de desarrollo local, instala y, luego, inicia el navegador Google Chrome.
  2. En el campo de dirección del navegador Chrome, ingresa chrome://inspect#devices para iniciar el inspector de Chrome. Deberías ver una lista de dispositivos en la página, y la URL HTML del lienzo debe aparecer debajo del nombre de tu dispositivo Google Home o Google Nest de prueba. Ten en cuenta que Chrome podría tardar un tiempo en detectar todos los dispositivos de tu red.
  3. Haz clic en el vínculo inspect debajo de la URL HTML para iniciar las Herramientas para desarrolladores de Chrome.

Las Herramientas para desarrolladores de Chrome se cargarán en su propia ventana. Puedes hacer clic en el botón de presentación en pantalla () para ver la GUI web renderizada en el dispositivo. En la siguiente captura de pantalla, se muestra cómo se ve tu app web en las Herramientas para desarrolladores de Chrome:

Ten en cuenta que tu aplicación web Canvas se carga en un iframe.

Sugerencias de depuración

Ten en cuenta las siguientes sugerencias adicionales durante la depuración:

  • Actualiza la página en las Herramientas para desarrolladores de Chrome para volver a cargar el contenedor de la app de entrega local con el código más reciente de la URL de desarrollo.
  • Verifica que tu app de JavaScript se cargue sin errores. Para hacerlo, consulta la sección de la consola en la página Herramientas para desarrolladores.
  • Agrega puntos de interrupción manuales al código con debugger; en el código de tu app web.
  • Si no ves tu dispositivo en chrome://inspect#devices durante un período prolongado, actualiza la página de inspección.
  • Para depurar cualquier problema de rendimiento, sigue el instructivo Comienza a analizar el rendimiento del tiempo de ejecución.
  • Como la memoria de la pantalla inteligente es limitada, tu app web podría fallar o bloquearse si supera los 200 MB. Para depurar problemas de memoria, sigue el instructivo para solucionar problemas de memoria.
  • Para cualquier error de entrega, consulta las solicitudes enviadas por los servidores de Actions on Google al webhook desde los registros de tu webhook o desde los registros de Stackdriver.