Depura tu app en Project IDX

Project IDX ofrece diferentes maneras de depurar tu app directamente desde tu lugar de trabajo. Las apps web y de Flutter ofrecen Lighthouse y las Herramientas para desarrolladores de Chrome en la vista previa web de Chrome en tu lugar de trabajo. Las apps de Flutter ofrecen vistas previas de iOS, Android y la Web para verificar y probar tu app mientras escribes el código. La consola de depuración integrada admite la depuración automática para los lenguajes más comunes y la depuración personalizada que puedes definir en un archivo launch.json en tu lugar de trabajo.

Obtén una vista previa de la aplicación

IDX incluye vistas previas de apps en el espacio de trabajo para apps web (Chrome y Safari para dispositivos móviles) y apps de Flutter (iOS, Android y Chrome). Las vistas previas de Android y Chrome admiten la recarga en caliente y la actualización en caliente, y ofrecen capacidades completas del emulador. Los simuladores de iOS y Safari ofrecen vistas previas interactivas y visuales en una variedad de dispositivos iOS, y simulan la experiencia de iOS en apps web y para dispositivos móviles.

Para obtener más información sobre las vistas previas de IDX, consulta Obtén una vista previa de tu app.

Usar las Herramientas para desarrolladores de Chrome para las vistas previas en la Web (experimental)

Las herramientas para desarrolladores de Chrome te ayudan a diagnosticar problemas en tu app directamente desde la vista previa en la Web. Puedes acceder a las Herramientas para desarrolladores de Chrome en el panel de vista previa web de IDX de la misma manera que abrirías Herramientas para desarrolladores desde tu navegador Chrome.

Esta función es experimental mientras trabajamos en crear una experiencia del usuario ideal. Envíanos tus comentarios para ayudarnos a mejorarlo.

1. Agrega las Herramientas para desarrolladores de Chrome a tu lugar de trabajo de IDX:

   1. Para abrir la ventana Configuración, haz clic en el ícono de ajustes o presiona Ctrl + , (en Windows/Linux/ChromeOS) o Cmd + , (en MacOS).
   2. Busca el parámetro de configuración IDX: Herramientas para desarrolladores web y selecciona Habilitar las Herramientas para desarrolladores de Chrome para la vista previa de la Web (se requiere que se vuelva a cargar el navegador). Si usas un archivo settings.json, también puedes configurar "IDX.webDevTools": true.
   3. Actualiza la ventana del navegador y vuelve a cargar el lugar de trabajo de IDX.

2. Abre la vista previa en la Web en Project IDX: Abre la paleta de comandos (Cmd + Mayúsculas + P en Mac o Ctrl + Mayúsculas + P en ChromeOS, Windows o Linux) y selecciona Project IDX: Mostrar vista previa en la Web.

3. El panel Herramientas para desarrolladores está minimizado dentro del panel de vista previa en la Web. Haz clic en la barra de Herramientas para desarrolladores para expandir el panel y usar las Herramientas para desarrolladores dentro del panel de vista previa en la Web.

Usa el panel de Herramientas para desarrolladores en la vista previa web de IDX de la misma manera que lo harías para depurar tu app en el navegador Chrome.

Ejecuta Lighthouse para las vistas previas en la Web

Lighthouse audita tu app en función de las categorías de auditoría específicas que selecciones y muestra un informe con resultados y sugerencias. Puedes ejecutar informes de Lighthouse directamente desde la vista previa en la Web en Project IDX.

1. Abre la vista previa en la Web en Project IDX: Abre la paleta de comandos (Cmd + Mayúsculas + P en Mac o Ctrl + Mayúsculas + P en ChromeOS, Windows o Linux) y selecciona Project IDX: Mostrar vista previa en la Web.

2. Haz clic en el ícono de verificación de rendimiento en la barra de herramientas de vista previa en la Web.

3. En el panel de Lighthouse, selecciona las categorías de auditoría que desees. Puedes elegir entre informes de auditoría del rendimiento, la accesibilidad, el cumplimiento de las prácticas recomendadas, SEO y el rendimiento de las apps web progresivas. Haz clic en Analizar página para generar los informes.

   Los informes pueden tardar unos minutos en generarse.

4. Una vez que los informes aparezcan en el panel de Lighthouse, puedes revisar los resultados de cada categoría de auditoría o cambiar entre categorías de auditoría haciendo clic en la puntuación y el nombre de la categoría.

Usa la consola de depuración

Project IDX incluye la consola de depuración integrada de Code-OSS. Usa esta consola para depurar tu app con depuradores listos para usar para los lenguajes de programación más comunes o agrega una extensión de depuración de VSCode Marketplace.

Si quieres escribir una depuración personalizada, agrega un archivo launch.json a tu lugar de trabajo.