Guía de herramientas de desarrollo de Owl

Después de haber instalado la extensión, se agregará un nuevo ícono a la barra de extensiones. Si no lo ves, puedes anclar la extensión mediante la ventana emergente de extensiones.

Al hacer clic en el icono del búho, se abrirá una ventana emergente con información. Esta ventana emergente es útil para saber de antemano si el búho está cargado en la pestaña o no. Esto también lo indica el propio icono: si está al revés, significa que el búho no está cargado en la pestaña activa. Tenga en cuenta que la extensión no admite versiones antiguas de búho y, por lo tanto, la ventana emergente de la extensión las indicará como obsoletas o ausentes.

Primeros pasos

Cuando esté en una página donde se detecte Owl, puede abrir sus herramientas de desarrollo haciendo clic derecho -> Inspeccionar o usando F12. En el menú de herramientas de desarrollo, puede buscar la pestaña Owl que agrega la extensión. Estará presente de manera predeterminada al final de la lista, pero puede arrastrarla y soltarla en la posición que desee para facilitar la navegación en el futuro.

Al abrir la pestaña, se accede de forma predeterminada a la vista Componentes, que es una de las dos pestañas disponibles en la parte superior. A continuación, se muestra un ejemplo de las herramientas de desarrollo en la aplicación CRM de Odoo:

Pestaña de componentes

La pestaña de componentes está dividida en dos subventanas: el árbol de componentes a la izquierda y los detalles del componente a la derecha. El árbol de componentes mostrará todos los diferentes componentes que están presentes en la pestaña en forma de árbol. La raíz de este árbol es en realidad la aplicación, que no es un componente, pero que puede ser inspeccionada por las herramientas de desarrollo como si lo fuera. También puede haber varias aplicaciones cargadas en la página, como en un sitio web:

Hay una barra de búsqueda conveniente en la parte superior del árbol de componentes que te ayudará a encontrar los componentes que deseas en el árbol y también se puede usar un selector de elementos para seleccionar directamente el componente en el que deseas enfocarte en la página, lo que es especialmente útil cuando intentas encontrar lo que deseas. Simplemente haz clic en el ícono del selector de elementos y haz clic en el elemento en el que deseas enfocarte en la página y se seleccionará en las herramientas de desarrollo en consecuencia. Al pasar el mouse sobre cualquier elemento en la página en este modo, se resaltará y lo mismo sucede en cualquier momento en el árbol de componentes.

En el árbol en sí, la navegación es bastante sencilla y es similar a la de la pestaña Elementos de las herramientas de desarrollo del navegador. Es posible navegar con el teclado usando las teclas de flecha y hay múltiples atajos disponibles en un menú personalizado al hacer clic derecho sobre un componente. Este menú permite expandir/plegar todos los nodos hijos de un componente, plegar solo sus hijos directos, inspeccionar el código fuente del componente, enviarlo como una variable global en la consola, ir a la pestaña Elementos y centrarse en su contenido, forzar un rerender del componente, enviar sus estados observados a la consola como una variable global, inspeccionar su plantilla compilada en la pestaña Fuentes o enviar su plantilla sin procesar a la consola.

La ventana de detalles del componente a la derecha mostrará el componente que está seleccionado actualmente, así como su entorno, propiedades, estados observados y todas las demás variables que están presentes en su instancia. Si bien las propiedades y el entorno ya están presentes en la instancia real del componente y son bastante explícitos por sí mismos, el valor del estado observado es un poco más complicado de comprender.

El estado observado es en realidad información sobre qué variables está observando el componente: cuando el componente lee cualquier propiedad de un objeto reactivo, el componente se suscribirá a esta propiedad, lo que significa que escuchará cualquier cambio que pueda ocurrir en la propiedad y se renderizará cuando ocurra dicho cambio. Esto se puede visualizar fácilmente dentro de las herramientas de desarrollo dentro de la sección de estado observado: las propiedades observadas de los objetos reactivos se muestran en negrita, mientras que las demás están en gris. Tenga en cuenta que una propiedad en gris en el estado observado de un componente puede ser observada por otro y lo contrario también es posible. Aquí hay un ejemplo para algún componente de campo de usuario:

La navegación dentro de las propiedades también es similar a la de las variables de consola: las propiedades tienen su prototipo desplegado y los captadores obtendrán su valor cuando se haga clic en (…). También es posible enviar cualquier propiedad a la consola usando el menú contextual que aparece al hacer clic derecho sobre ella y las funciones también se pueden inspeccionar en la pestaña de fuentes.

El uso del menú contextual del botón derecho sobre una propiedad también permite observar variables. Las variables observadas se enviarán a una sección dedicada de la ventana de detalles y su valor se actualizará cada 200 ms. Estas variables solo se muestran cuando se encuentran y su ruta de acceso se mantendrá en la memoria dentro del navegador para que siempre persista hasta que el usuario decida dejar de observar la variable. Al igual que en las herramientas de desarrollo del navegador, los objetos observados se muestran en forma reducida y no se puede interactuar con ellos. Aún es posible enviarlos a la consola o eliminarlos de la lista mediante el botón derecho.

La última sección de la ventana de detalles se completa con los ganchos del ciclo de vida del componente. Al hacer clic derecho sobre ellos, se pueden colocar puntos de interrupción dentro del gancho (ya sea en su instancia o clase; los ganchos como mount y willStart no pueden tener puntos de interrupción basados en instancias porque nunca se activarán). Las condiciones en los puntos de interrupción condicionales se evaluarán en el contexto de la definición del componente.

Hay varios iconos disponibles para realizar varias de las acciones descritas anteriormente en el menú contextual del árbol de componentes y todas estas acciones también están disponibles abriendo el menú haciendo clic derecho en el nombre del componente. Al hacer clic izquierdo en el nombre del componente, este se enfocará en el árbol de componentes.

También es posible editar cualquiera de las propiedades del nodo hoja. Para ello, debe hacer doble clic en el valor de la propiedad y modificarlo utilizando la entrada recién creada y luego presionar Enter para aplicar los cambios. Tenga en cuenta que los valores modificados deben escribirse en formato JSON para que sean válidos (ejemplos: 89, “yes”, undefined, null, [“hello”, 15], {“a”: 1}, true, …). La edición de cualquier valor producirá una representación manual del componente (o del componente raíz de la aplicación en el caso de valores env). Si la edición tiene un impacto en el componente o no y si produce un error es responsabilidad del usuario.

Perfil

La pestaña del generador de perfiles es la otra pestaña de las herramientas de desarrollo de Owl. Consiste en una barra de acciones en la parte superior y un árbol/lista de eventos relacionados con las representaciones de los componentes de Owl. Aquí hay un ejemplo de los eventos lanzados al ingresar a la aplicación Odoo Crm.

En el estado inicial no se muestra ningún evento. Es necesario activar la grabación de eventos antes de que sean interceptados por las herramientas de desarrollo mediante el botón de grabación.

El segundo botón se utiliza para borrar todos los eventos que se han registrado. La selección se puede utilizar para cambiar entre la vista de árbol (que muestra la causalidad entre renderizaciones) y la vista de registro de eventos que simplemente muestra los eventos en el orden exacto en que se activaron. En esta vista, puede expandir los eventos de creación, actualización y destrucción que revelan el componente que inició el evento. Además, aparecerá una línea de transición cada vez que se haya cargado un nuevo cuadro de animación entre eventos.

El tercer botón solo es visible en la vista de árbol y permite desplegar todos los eventos de renderizado que se registraron. Algunas acciones también están disponibles al hacer clic derecho en cualquier evento de la vista de árbol para navegar de manera similar a como se hace en el árbol de componentes.

También existen las funciones Trace Renderings y Trace Subscriptions. Estas funciones son independientes del registro de eventos y no tienen efecto en la pestaña del generador de perfiles. La opción Trace Renderings se utiliza para registrar en la consola todos los eventos de renderización y permite mostrar su información de seguimiento. De manera similar, la opción Trace Subscriptions registra todas las propiedades que causaron un evento de renderización y también permite ver el seguimiento de la modificación.

Las herramientas de desarrollo de Owl también permiten inspeccionar los iframes codificados en Owl: cuando se detecta un iframe de Owl en la página, el selector de iframes aparecerá junto a las pestañas. Esto permite cambiar de un iframe a otro fácilmente. Tenga en cuenta que al cambiar de iframe se borrarán todos los eventos de registro de la pestaña del generador de perfiles. La detección de iframes no funciona actualmente en la versión de Firefox. Somos conscientes de este problema e intentaremos solucionarlo en el futuro.

Opciones

La extensión Owl DevTools tiene una función de modo oscuro que se establece de manera predeterminada en la configuración general de DevTools y se puede activar y desactivar mediante el ícono del sol o la luna en la esquina superior derecha de la pestaña. También hay un botón de actualización para restablecer por completo Owl DevTools.

Solución de problemas

Si la respuesta de la página a las herramientas de desarrollo parece estar cortada, primero puedes intentar usar el botón de actualización mencionado anteriormente, pero si aún no parece funcionar, simplemente cierra las herramientas de desarrollo y actualiza la página. Esto sucederá eventualmente cada vez que una pestaña permanezca abierta por mucho tiempo sin actualizarse.