Compartir comentarios
Las respuestas se generan en base a la documentación.

Probar y depurar

Tabla de contenidos

Con el fin de mejorar la experiencia del desarrollador, Docker Desktop proporciona un conjunto de herramientas para ayudarte a probar y depurar tu extensión.

Abrir Chrome DevTools

Para abrir Chrome DevTools para tu extensión al seleccionar la pestaña Extensions (Extensiones), ejecuta:

$ docker extension dev debug <nombre-de-tu-extension>

Cada clic posterior en la pestaña de la extensión también abrirá Chrome DevTools. Para detener este comportamiento, ejecuta:

$ docker extension dev reset <nombre-de-tu-extension>

Después de desplegar una extensión, también es posible abrir Chrome DevTools desde la interfaz de la extensión utilizando una variación del Código Konami. Selecciona la pestaña Extensions (Extensiones) y luego presiona la secuencia de teclas up, up, down, down, left, right, left, right, p, d, t (arriba, arriba, abajo, abajo, izquierda, derecha, izquierda, derecha, p, d, t).

Recarga en caliente (hot reloading) durante el desarrollo de la UI

Durante el desarrollo de la UI, resulta útil utilizar la recarga en caliente para probar tus cambios sin tener que recompilar toda tu extensión. Para hacer esto, puedes configurar Docker Desktop para cargar tu UI desde un servidor de desarrollo, como el que Vite inicia cuando se invoca con npm start.

Asumiendo que tu aplicación se ejecuta en el puerto predeterminado, inicia tu aplicación de UI y luego ejecuta:

$ cd ui
$ npm run dev

Esto inicia un servidor de desarrollo que escucha en el puerto 3000.

Ahora puedes indicarle a Docker Desktop que utilice esto como la fuente del frontend. En otra terminal ejecuta:

$ docker extension dev ui-source <nombre-de-tu-extension> http://localhost:3000

Cierra y vuelve a abrir el panel de control de Docker Desktop y ve a tu extensión. Todos los cambios en el código del frontend serán visibles de inmediato.

Una vez que hayas terminado, puedes restablecer la configuración de la extensión a los ajustes originales. Esto también desactivará la apertura automática de Chrome DevTools si habías utilizado docker extension dev debug <nombre-de-tu-extension>:

$ docker extension dev reset <nombre-de-tu-extension>

Mostrar los contenedores de la extensión

Si tu extensión está compuesta por uno o más servicios que se ejecutan como contenedores en la VM de Docker Desktop, puedes acceder a ellos fácilmente desde el panel de control de Docker Desktop.

  1. En Docker Desktop, navega a Settings (Configuración).
  2. En la pestaña Extensions (Extensiones), selecciona la opción Show Docker Desktop Extensions system containers (Mostrar contenedores del sistema de las extensiones de Docker Desktop). Ahora podrás ver los contenedores de tu extensión y sus registros (logs).

Limpieza

Para eliminar la extensión, ejecuta:

$ docker extension rm <nombre-de-tu-extension>

¿Qué sigue?