REA frente a Chrome DevTools: ¿investigación con un agente o depuración directa?

Elige Chrome DevTools para depurar directamente en el navegador, editar DOM/CSS, establecer puntos de interrupción en JavaScript e inspeccionar el rendimiento. Elige REA cuando quieras que un agente de programación investigue una página del navegador, relacione determinados scripts o solicitudes con una pregunta y explique los hallazgos con pruebas.

El flujo de trabajo de REA para el navegador requiere una conexión local con el navegador previamente preparada. No inspecciona un sitio web simplemente porque alguien introduzca una URL en este sitio comunitario. Esta guía independiente enlaza a la documentación oficial de REA para el navegador y a la documentación de Chrome DevTools.

¿En qué se diferencian los dos flujos de trabajo para el navegador?

Chrome DevTools está integrado en Chrome. Sus paneles permiten a un desarrollador inspeccionar una página en ejecución, cambiar estilos, pausar JavaScript, inspeccionar solicitudes, registrar recorridos de usuario y examinar el rendimiento y la memoria. Controlas la investigación directamente en el navegador. La descripción general de DevTools de Google documenta esos flujos de trabajo.

REA conecta tu agente de programación con determinadas observaciones del navegador, como la estructura de la página, los scripts cargados, la actividad de red y las capturas de pantalla solicitadas. El agente utiliza esas observaciones para responder a una pregunta concreta o proponer una reconstrucción. REA también dispone de flujos de trabajo separados para archivos de aplicaciones locales y binarios nativos, que quedan fuera del alcance habitual de la depuración de páginas con DevTools. El README de REA distingue estas familias de objetivos.

¿Qué quieres hacer?	Punto de partida recomendado	Entrada	Resultado o ventaja
Ajustar inmediatamente el espaciado, la disposición o una regla CSS	Chrome DevTools	Elemento DOM seleccionado	Edición de estilos en tiempo real y respuesta visual
Pausar en una línea de JavaScript e inspeccionar el estado	Chrome DevTools	Página en ejecución y punto de interrupción	Control directo del depurador e inspección de variables
Encontrar un cuello de botella de carga o un problema de memoria	Chrome DevTools	Grabación del rendimiento o perfil de memoria	Cronologías especializadas y paneles de diagnóstico
Preguntar a un agente cómo funciona una característica del navegador	Flujo de REA para el navegador	Conexión local preparada y pregunta concreta	Código y observaciones seleccionados e interpretados por el agente
Seguir una función desde un paquete Electron hasta el código nativo	Flujos separados de REA para aplicaciones y binarios nativos	Archivos de la aplicación local y proveedores adecuados	Pruebas que abarcan varios tipos de objetivos

¿Cuándo es Chrome DevTools la mejor opción?

Utiliza DevTools cuando ya sepas qué inspeccionar y quieras una respuesta inmediata. Seleccionar un elemento, probar un estilo, colocar un punto de interrupción o revisar una solicitud suele ser una acción directa y breve. DevTools evita la configuración y la interpretación adicionales que conlleva el intercambio con un agente.

DevTools también es el mejor punto de partida para un trabajo detallado sobre el rendimiento y la memoria del navegador. El panel de rendimiento muestra grabaciones de la carga y la ejecución; las herramientas de memoria ayudan a investigar problemas de memoria. Que REA pueda recopilar observaciones del navegador no implica que tenga una interfaz equivalente para cada diagnóstico de DevTools. Empieza por la documentación de rendimiento de Google o la documentación de memoria para esas tareas.

Si falla una solicitud, el panel de red te da acceso directo a la actividad registrada por el navegador. Un agente puede ayudar a interpretar las pruebas, pero no hace falta añadir esa capa cuando el estado de la respuesta o el contenido de la solicitud ya explica el problema.

¿Cuándo resulta útil una investigación con REA?

REA resulta útil cuando tu pregunta requiere varias observaciones relacionadas y quieres que el agente de programación explique esa relación. Pregunta por un comportamiento concreto, identifica la página que quieres analizar y solicita el código cargado y las observaciones pertinentes. Una instrucción amplia, como «explica todo este sitio web», ofrece menos formas claras de comprobar la respuesta.

El ejemplo oficial del dinosaurio de REA lo ilustra de forma concreta. REA lee el script cargado por un juego del dinosaurio derivado de Chromium. El agente identifica una velocidad inicial de 6, una aceleración de 0.001 por actualización sin colisión y una velocidad máxima de 13; después utiliza esa regla en un pequeño juego con velocidad ajustable. El ejemplo incluye referencias al código fuente y una comprobación controlada de la regla de velocidad.

Ese ejemplo es obra del proyecto REA. No demuestra que se pueda reconstruir cualquier sitio web ni debe presentarse como la experiencia de un usuario independiente de la comunidad. Nuestra colección de casos de la comunidad distingue las publicaciones originales de los ejemplos desarrollados por el proyecto oficial.

¿Cómo deberías preparar una investigación en el navegador?

Sigue los pasos de preparación de REA para el navegador con un navegador de la familia Chrome y una conexión local de depuración. Proporciona al agente la URL de la página deseada, el punto de conexión local requerido por esa guía y una pregunta. Respeta el alcance de conexión indicado en la guía en lugar de exponer un servicio de depuración a Internet.

Una instrucción para una página de demostración propia podría ser:

Utiliza REA con la conexión local preparada del navegador para inspeccionar
mi página de demostración. Explica cómo su cuadro de búsqueda actualiza los resultados.
Muestra el script cargado pertinente y las ubicaciones en el código fuente.
Enumera las observaciones que respaldan la explicación y todo lo que se desconozca.

Revisa si las pruebas recibidas describen la acción y el estado que pretendías analizar. Si la aplicación tiene varias páginas o estados, un script de un estado puede no explicar otro. En DevTools, repite manualmente la acción cuando sea necesario para confirmar la solicitud o el recorrido del código descritos por el agente.

¿Puede alguna de las dos herramientas mostrar el código fuente del servidor del sitio web?

Los scripts y las solicitudes visibles en el navegador revelan el comportamiento del cliente expuesto a esa sesión. No revelan automáticamente el código privado de implementación del servidor, el contenido de las bases de datos ni las reglas de negocio ocultas. Una respuesta puede mostrar lo que devolvió el servidor para una solicitud sin explicar todos los pasos internos que la produjeron.

Trata el diseño del servidor propuesto por un agente como una hipótesis, salvo que existan pruebas adicionales obtenidas con autorización que lo respalden. Reproducir una interfaz observada y recuperar su implementación original son afirmaciones diferentes. Las pruebas y limitaciones de REA ayudan a expresar esa distinción; el agente sigue teniendo que respetarla.

Las capturas del navegador pueden incluir datos específicos de la sesión, cuerpos de solicitudes o URL sensibles. REA realiza el análisis de forma local, pero los resultados de las herramientas se entregan a tu agente de programación y están sujetos a la política de datos del proveedor de su modelo. Las preguntas frecuentes oficiales de REA explican este límite en el tratamiento de los datos. Comparte únicamente las observaciones adecuadas para tu tarea y tu autorización.

¿Qué preguntas surgen al elegir entre estas herramientas?

¿Sustituye REA a Chrome DevTools?

REA ofrece una interfaz de investigación para agentes de programación. DevTools ofrece depuración directa en el navegador y paneles de diagnóstico especializados. Utilizar DevTools para verificar un hallazgo de REA es una combinación útil.

¿Necesito Hopper, Ghidra o IDA para un sitio web?

El flujo de REA para el navegador requiere un navegador compatible y la conexión local documentada. Los motores nativos se utilizan para el análisis profundo y separado de binarios nativos, no para la inspección habitual de páginas.

¿Se ejecuta REA en este sitio web?

No. reverseengineeranything.tools publica ejemplos de la comunidad y guías. Instala el paquete oficial de REA en tu propia máquina para ejecutar investigaciones; este sitio no ofrece cargas para análisis ni ejecución alojada.

¿Puedo utilizar DevTools sin un modelo de IA?

Sí. Chrome DevTools está disponible directamente en Chrome. La CLI de REA también puede ejecutar los flujos compatibles sin un agente de programación, mientras que una investigación de REA dirigida por un agente utiliza el acceso al modelo y las condiciones de ese cliente.

¿Cómo empiezo a utilizar REA con un agente?

Lee nuestra guía para la primera investigación y sigue después las guías oficiales de configuración y del navegador. Comprueba la lista de herramientas del servidor instalado; las funciones documentadas en la rama main del repositorio pueden ser más recientes que el paquete publicado.