¿Qué sucede cuando haces clic en Exportar?
El Ejemplo de navegador de notas tiene un Notas de exportación botón. Al hacer clic en él, se carga notes.json, formatea las dos notas como CSV e inicia una descarga .
Del clic a la descarga de CSV
- 01 * TúHaga clic en Exportar notasRealice la acción en su navegador mientras se ejecuta la captura.
- 02 * REA Registre la solicitudCapture la URL de la solicitud, el estado de la respuesta y la estructura JSON de la página seleccionada.
-
03 * Su agenteLea el código de exportaciónConecte la solicitud observada a
fetch("./notes.json")enexport.js.
GET notes.json → 200 → notes[] → CSV
Abra Chrome con depuración remota
Abra el ejemplo de Hosted Notes con un perfil de navegador independiente y un puerto de depuración local. En Linux :
google-chrome \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/rea-notes-browser \
https://reverseengineeranything.app/examples/notes-web/Utilice la ruta ejecutable de su navegador instalado en macOS o Windows . Puede reemplazar la URL de la página con otra página que desee inspeccionar.
REA se conecta a este navegador existente. Usted mantiene el control de la página, realiza la acción y cierra el navegador cuando termina.
Pídale a su agente que vea una acción
Use REA para inspeccionar esta página mientras hago clic en Exportar notas. ¿Qué solicitud hace y cómo se construye el CSV?
Mensaje de ejemplo. Proporcione a su agente el punto final de depuración, http://127.0.0.1:9222, y la URL de la página. Deje que inicie la captura antes de hacer clic.
Su agente descubre el destino de la página, abre una ventana de observación y lee la evidencia resultante. Luego puede inspeccionar el script detrás de la exportación.
O captura desde la terminal
Encontrar el ID de destino de la página:
npx -y rea-agents@latest list-browser-targets \
http://127.0.0.1:9222 --json
Elija el destino con la URL de ejemplo de Notes. Reemplazar TARGET_ID abajo con su ID, luego ejecute:
npx -y rea-agents@latest inspect-web-page \
http://127.0.0.1:9222 TARGET_ID \
--observation-ms 10000 \
--include-accessibility-text \
--include-json-body-shapes --jsonDeje que el comando se conecte durante unos segundos y luego haga clic en Notas de exportación en ese navegador. El resultado llega después de que finaliza la ventana de observación.
El resultado capturado incluye la página seleccionada, la actividad de la red durante esa ventana y la forma de la respuesta JSON. Las solicitudes anteriores están fuera de esta captura.
Leer el script de solicitud y exportación
| Hecho capturado | Valor |
|---|---|
| Solicitud | GET /examples/notes-web/notes.json |
| Respuesta | 200 · application/json |
| Iniciador de la solicitud | export.js * guión |
| Estructura de respuesta |
notes[] con id y title campos
|
npx -y rea-agents@latest inspect-web-page \
http://127.0.0.1:9222 TARGET_ID \
--include-script-sources --json
La solicitud identifica el origen de datos y los registros REA export.js como su iniciador. Lea la fuente de script capturada para ver cómo se utilizan los datos:
const response = await fetch("./notes.json");
const { notes } = await response.json();
// Format each note as a CSV row.
const url = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
link.href = url;
link.download = "notes.csv";
link.click();
La descarga se construye en la página utilizando la respuesta JSON. El paso de formateo CSV proviene del script; la captura de red establece que se solicitó este clic notes.json.
Abra el ejemplo · Descargar export.js · Descargar notes.json
Busque el script que solicita
notes.json. ¿Cómo se escapa de los títulos que contienen comas o comillas?
Para una aplicación JavaScript o Electron instalada, continúe con la flujo de trabajo de la aplicación para seguir los límites de archivos y procesos.