Extensión para navegadores Owl Devtools

La extensión de navegador Owl devtools es una extensión disponible en Chrome o Firefox que agrega una pestaña de Owl a las herramientas de desarrollo del navegador para inspeccionar todas las aplicaciones Owl que están presentes en cualquier página web, sus componentes y permite interactuar con sus datos hasta cierto punto. También hay un generador de perfiles disponible para visualizar el ciclo de vida de los componentes y poder rastrear su origen.

Consulte la documentación devtools para obtener más información.

Instalar la extensión manualmente (para desarrolladores)

En la carpeta raíz de owl:

npm install

Para chrome:

npm run build:devtools-chrome

Para firefox:

npm run build:devtools-firefox

También puedes ejecutar:

npm run dev:devtools-chrome

o

npm run dev:devtools-firefox

para evitar volver a compilar owl y ganar tiempo si ya se ha hecho.

Para ejecutar la extensión:

En Google Chrome: ve al panel de administración de extensiones de Chrome, activa el modo de desarrollador y haz clic en “Cargar descomprimido”. Selecciona la carpeta de salida (dist/devtools) y listo, ¡tu extensión está activa! Hay un botón de actualización conveniente en la tarjeta de extensión (aún en la misma página de administración) para actualizar tu código. Ten en cuenta que si tienes algún problema, es posible que debas eliminar por completo y volver a cargar la extensión para actualizarla por completo.

En Firefox: ve a la dirección about:debugging#/runtime/this-firefox y haz clic en Cargar complemento temporal.... Selecciona cualquier archivo de la carpeta de salida (dist/devtools) y listo, ¡tu extensión está activa! Aquí, puedes usar el botón de recarga para actualizar la extensión.

Tenga en cuenta que es posible que tenga que abrir otra ventana o volver a cargar la pestaña para ver cómo funciona la extensión. Tenga en cuenta también que la extensión solo estará activa en páginas que tengan una versión adecuada de Owl.