Capítulo 2: Tu Kit de Herramientas Esenciales de JavaScript

¿Por qué este capítulo? La mayor parte del tiempo de depuración que le he facturado a clientes a lo largo de los años no lo pasé leyendo código — lo pasé mirando las pestañas de Network y Console de las DevTools. Dominar estas herramientas es lo que separa a quien adivina de quien diagnostica. ¿Qué trata de resolver Odoo con esto? Odoo no trae su propio debugger — depende por completo de las DevTools de tu navegador y de un ciclo editor/servidor bien configurado (--dev=all), así que este capítulo cubre las herramientas web genéricas de las que depende todo desarrollador frontend de Odoo. Aplicación en la vida real: Cuando un cliente reporta que "el botón no hace nada", las pestañas Console y Network de este capítulo casi siempre son donde encuentras el error real — mucho antes de acercarte siquiera al código fuente de OWL.

Antes de que un chef pueda cocinar una obra maestra, debe conocer sus cuchillos. Antes de que un carpintero pueda construir una mesa, debe dominar su sierra y martillo. Para un desarrollador, nuestras herramientas son igual de críticas. Escribir código es solo la mitad de la batalla; la otra mitad es depurar, inspeccionar y entender qué está haciendo nuestro código.

Este capítulo presenta la herramienta más importante en tu arsenal: las Herramientas de Desarrollador de tu navegador web. También cubriremos la configuración esencial que necesitas en tu editor de código y proporcionaremos ejercicios prácticos para que te sientas cómodo con estas herramientas. Dominar estas herramientas no es opcional—es la forma más rápida de pasar de ser un principiante que está adivinando qué está mal a un profesional que sabe cómo descubrirlo.

El Navegador es tu Mejor Amigo

Cada navegador web moderno (como Chrome, Firefox o Edge) viene con un poderoso conjunto de "DevTools" integradas. Usualmente puedes abrirlas haciendo clic derecho en cualquier lugar de una página web y seleccionando "Inspeccionar" o presionando la tecla F12.

Para un desarrollador de Odoo, las DevTools son tu ventana al alma de tu aplicación. Te permiten ver la estructura HTML, observar la comunicación con el servidor de Odoo, y depurar tu JavaScript línea por línea. Exploremos las cuatro pestañas más importantes.

La Consola: El Diario de tu Código

La Consola es el primer lugar donde deberías mirar cuando algo sale mal. Es un registro en vivo donde JavaScript puede imprimir mensajes, advertencias y—lo más importante—errores.

Para qué sirve: * Ver Errores: Cuando tu componente OWL se bloquea, un mensaje de error detallado aparecerá aquí, a menudo diciéndote la línea exacta de código que falló. * Registrar Variables: Puedes imprimir el valor de cualquier variable desde tu código usando console.log(). Esta es la forma más simple de verificar el estado de tu componente en cualquier momento dado. * Pruebas Interactivas: Puedes escribir JavaScript directamente en la consola y ejecutarlo inmediatamente—perfecto para probar pequeños pedazos de código.

Cómo usarla: Imagina que quieres ver qué datos están dentro de una variable llamada this.state.tasks. En el JavaScript de tu componente, añadirías:

console.log("Las tareas actuales son:", this.state.tasks);

Cuando tu código se ejecute, este mensaje aparecerá en la Consola, permitiéndote inspeccionar los datos.

Consejo profesional: Puedes usar diferentes métodos de consola para diferentes tipos de mensajes:

console.log("Información general");
console.warn("Esto es una advertencia");
console.error("Esto es un error");
console.table(arrayOfObjects); // Muestra arrays/objetos como tablas ordenadas

La Pestaña Elements: El HTML en Vivo

La pestaña Elements te muestra el HTML y CSS completo y en vivo de la página que estás viendo. Este no es el código fuente que escribiste; es el producto final después de que tu navegador haya renderizado todo, incluyendo el HTML generado por tus componentes OWL.

Para qué sirve: * Inspeccionar Estructura: Puedes ver exactamente cómo la plantilla de tu componente OWL se convirtió en HTML. ¿Está ese div dentro de otro div como esperabas? * Probar Cambios de CSS: Puedes seleccionar cualquier elemento y añadir, quitar o cambiar sus estilos CSS directamente en el navegador para ver el efecto instantáneamente. Esto es perfecto para probar rápidamente cambios visuales sin tener que modificar tu código y recargar. * Encontrar Problemas de CSS: Cuando algo no se ve bien, puedes inspeccionar el elemento para ver qué reglas CSS se están aplicando y cuáles están siendo sobrescritas.

Consejo profesional: Haz clic derecho en cualquier elemento en la pestaña Elements y selecciona "Copy selector" para obtener el selector CSS exacto para ese elemento.

La Pestaña Network: Espiando el Servidor

La pestaña Network es tu centro de control para toda la comunicación entre tu navegador y el servidor de Odoo. Cada vez que tu componente OWL hace una llamada RPC para obtener datos, la verás aquí.

Para qué sirve: * Observar Llamadas RPC: Cuando haces clic en un botón que debería guardar datos, puedes observar la pestaña Network para confirmar que se hizo una llamada al servidor de Odoo. * Inspeccionar Cargas Útiles: Puedes hacer clic en cualquier solicitud para ver exactamente qué datos se enviaron al servidor (la "carga útil") y qué datos envió el servidor de vuelta en su respuesta. Esto es invaluable para depurar problemas donde los datos parecen incorrectos. * Monitoreo de Rendimiento: Puedes ver cuánto tiempo toma cada solicitud e identificar operaciones lentas.

Consejo profesional: Usa los botones de filtro (XHR, JS, CSS, etc.) para mostrar solo el tipo de solicitudes que te interesan. Para el desarrollo de Odoo, a menudo querrás filtrar por "XHR" para ver solo las solicitudes de datos.

La Pestaña Sources: El Depurador Definitivo

La pestaña Sources es la herramienta más poderosa, y tal vez más intimidante. Te permite pausar tu código en medio de la ejecución e inspeccionar todo.

Para qué sirve: * Establecer Breakpoints: Puedes elegir una línea en tu código JavaScript y establecer un "breakpoint". Cuando el navegador llegue a esa línea, pausará toda la aplicación. * Inspeccionar Estado: Mientras está pausado, puedes pasar el cursor sobre cualquier variable para ver su valor actual. Puedes ver toda la pila de llamadas (qué funciones llamaron a qué otras funciones) y avanzar por tu código una línea a la vez. * Edición de Código en Vivo: En algunos casos, incluso puedes editar el código directamente en el navegador y ver los cambios inmediatamente.

Consejo profesional: Puedes establecer breakpoints condicionales que solo se pausan cuando se cumplen ciertas condiciones. Haz clic derecho en un número de línea y selecciona "Add conditional breakpoint."

Tu Editor de Código y Configuración de Odoo

Mientras que el navegador es para inspeccionar el resultado de tu código, tu editor de código es donde lo escribes.

Visual Studio Code: Tu Centro de Comando de Desarrollo

Visual Studio Code (VS Code) es el estándar de la industria para el desarrollo web moderno. Es gratuito, poderoso y tiene excelente soporte para JavaScript, Python y XML—todos los lenguajes que usarás en el desarrollo de Odoo.

Extensiones Esenciales para el Desarrollo de Odoo

Aquí están las extensiones imprescindibles de VS Code que harán tu desarrollo de Odoo/OWL mucho más eficiente:

Para JavaScript/OWL: * JavaScript (ES6) Code Snippets: Atajos rápidos para patrones comunes de JavaScript * Auto Rename Tag: Renombra automáticamente etiquetas HTML/XML emparejadas

Nota: El coloreado de pares de paréntesis ya viene integrado en VS Code (Configuración → "Bracket Pair Colorization")—no necesitas ninguna extensión.

Para Python/Odoo: * Python: Extensión oficial de Python con resaltado de sintaxis y depuración * Pylance: Servidor de lenguaje Python avanzado para mejor inteligencia de código * autoDocstring: Genera automáticamente docstrings de Python

Para XML/QWeb: * XML Tools: Formateo y validación para archivos XML * Auto Close Tag: Cierra automáticamente etiquetas XML/HTML * XML Language Support: Características mejoradas de edición XML

Productividad General: * GitLens: Capacidades Git supercargadas * Material Icon Theme: Mejores iconos de archivo para diferentes tipos de archivos * Thunder Client: Pruebas de API directamente en VS Code (genial para probar llamadas RPC de Odoo)

Configuración del Servidor Odoo

Para hacer que Odoo recargue automáticamente tus cambios de JavaScript y CSS sin necesidad de un reinicio manual del servidor, deberías ejecutar Odoo con la bandera --dev=all. Esto es crucial para un flujo de trabajo de desarrollo eficiente.

./odoo-bin -c tu_archivo_config.conf --dev=all

La bandera --dev=all habilita: * Recarga automática del código Python * Recarga automática de assets JavaScript y CSS * Recarga automática de vistas XML y plantillas * Mensajes de error mejorados e información de depuración

Práctica Práctica: Sintiéndote Cómodo con las Herramientas

Pongamos estas herramientas a trabajar con algunos ejercicios prácticos. Estos te ayudarán a sentirte cómodo con las DevTools antes de que empecemos a construir componentes OWL.

Ejercicio 1: Exploración de la Consola

1. Abre cualquier instancia de Odoo (o cualquier sitio web) en tu navegador
2. Abre las DevTools presionando F12 o haciendo clic derecho y seleccionando "Inspeccionar"
3. Ve a la pestaña Console
4. Prueba estos comandos (escribe cada uno y presiona Enter): javascript console.log("¡Hola, mundo OWL!"); console.warn("Este es un mensaje de advertencia"); console.error("Este es un mensaje de error"); console.table([{name: "Alice", age: 25}, {name: "Bob", age: 30}]);
5. Observa cómo diferentes métodos de consola muestran información de diferentes maneras

Ejercicio 2: Inspección de Elementos

1. Navega a una vista de formulario de Odoo (como editar un contacto o producto)
2. Haz clic derecho en cualquier botón y selecciona "Inspeccionar"
3. Observa la estructura HTML en la pestaña Elements
4. Intenta cambiar el texto del botón haciendo doble clic en el texto en el HTML y escribiendo algo nuevo
5. Añade un estilo CSS haciendo clic en el panel "Styles" y añadiendo una nueva propiedad como background-color: red;
6. Observa cómo cambia el botón en tiempo real

Ejercicio 3: Monitoreo de Red

1. Abre la pestaña Network antes de realizar cualquier acción
2. Haz clic en "Guardar" en cualquier formulario de Odoo (como editar un contacto)
3. Observa las solicitudes aparecer en la pestaña Network
4. Haz clic en una de las solicitudes para ver los detalles
5. Mira la pestaña "Payload" o "Request" para ver qué datos se enviaron
6. Mira la pestaña "Response" para ver qué envió el servidor de vuelta

Ejercicio 4: Estableciendo tu Primer Breakpoint

1. Encuentra cualquier archivo JavaScript en la pestaña Sources (busca archivos .js)
2. Haz clic en un número de línea para establecer un breakpoint (aparecerá un punto rojo)
3. Realiza una acción que activaría ese código
4. Cuando el código se pause, pasa el cursor sobre variables para ver sus valores
5. Usa los controles (play, step over, step into) para controlar la ejecución

Ejercicio 5: Verificación de Configuración de VS Code

1. Instala VS Code si no lo has hecho ya
2. Instala al menos 3 extensiones de la lista anterior
3. Abre una carpeta de addon de Odoo en VS Code
4. Intenta abrir un archivo Python y verifica que funcione el resaltado de sintaxis
5. Intenta abrir un archivo XML y verifica que funcione la extensión XML

Solución de Problemas Comunes de Configuración

Las DevTools no se abren: Prueba diferentes métodos—F12, Ctrl+Shift+I (Windows/Linux), o Cmd+Option+I (Mac).

No hay resaltado de sintaxis en VS Code: Asegúrate de haber instalado las extensiones de lenguaje apropiadas y que VS Code reconozca el tipo de archivo (revisa la esquina inferior derecha).

Odoo no recarga cambios: Verifica que estés ejecutando con --dev=all y revisa la consola para cualquier mensaje de error.

No puedo encontrar archivos JavaScript en DevTools: Busca tus archivos bajo la pestaña "Sources", a menudo en una estructura de carpetas que refleja tu addon de Odoo.

Con las DevTools de tu navegador y un editor y servidor configurados apropiadamente, tienes un taller de grado profesional. Los ejercicios prácticos anteriores te ayudarán a sentirte cómodo con estas herramientas antes de que nos sumerjamos en los fundamentos de JavaScript. Recuerda: mientras más cómodo te sientas con la depuración e inspección, más efectivo y eficiente serás como desarrollador.

TL;DR: Las DevTools de tu navegador (Console, Sources, Network) más un editor y un servidor con --dev=all bien configurados son el kit de herramientas mínimo no negociable para cualquier depuración de OWL que hagas en este libro — y en proyectos reales.

Pruébalo tú mismo: El ejemplo de este capítulo está disponible como addon instalable de Odoo 19: simplifyit_owl_book_ch2_ex1. Las instrucciones de instalación están en el README del repositorio.

¿Qué Sigue?

En el siguiente capítulo, empezaremos a construir el conocimiento de JavaScript que necesitas para crear componentes OWL poderosos.