---
title: Ανάλυση browser και δικτύου — REA
url: https://rea.tools/el/guides/browser/
---

[Αρχική](https://rea.tools/el/) / [Οδηγοί](https://rea.tools/el/guides/) / Παρατήρηση στον browser

# Δείτε τι συμβαίνει όταν κάνετε κλικ.

Χρησιμοποιήστε μια μικρή εφαρμογή browser για να συνδέσετε μια ενέργεια, το δικτυακό της αίτημα και τη JavaScript που δημιουργεί ένα αρχείο προς λήψη.

## Τι συμβαίνει όταν πατάτε Export;

Το [παράδειγμα σημειώσεων στον browser](https://rea.tools/examples/notes-web/) έχει ένα κουμπί **Export notes**. Πατώντας το, φορτώνεται το `notes.json`, οι δύο σημειώσεις μορφοποιούνται ως CSV και ξεκινά μια λήψη.

Από το κλικ στη λήψη CSV

1. 01 · Εσείς

   Πατήστε Export notes

   Εκτελέστε την ενέργεια στον browser σας ενώ η καταγραφή είναι σε εξέλιξη.
2. 02 · REA

   Καταγραφή του αιτήματος

   Καταγράψτε το URL του αιτήματος, την κατάσταση απόκρισης και τη δομή JSON από την επιλεγμένη σελίδα.
3. 03 · Ο βοηθός σας

   Διαβάστε τον κώδικα εξαγωγής

   Συνδέστε το αίτημα που παρατηρήθηκε με το `fetch("./notes.json")` στο `export.js`.

`GET notes.json → 200 → notes[] → CSV`

Ξεκινήστε την καταγραφή πριν πατήσετε Export notes.

## Ανοίξτε το Chrome με απομακρυσμένη αποσφαλμάτωση

Ανοίξτε το φιλοξενούμενο παράδειγμα σημειώσεων με ξεχωριστό προφίλ browser και τοπική θύρα αποσφαλμάτωσης. Στο Linux:

Ξεκινήστε τον browser του παραδείγματος

```
google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/rea-notes-browser \
  https://rea.tools/examples/notes-web/
```

Χρησιμοποιήστε τη διαδρομή εκτελέσιμου του εγκατεστημένου browser σας σε macOS ή Windows. Μπορείτε να αντικαταστήσετε το URL της σελίδας με μια άλλη σελίδα που θέλετε να εξετάσετε.

Το REA συνδέεται με αυτόν τον ήδη ανοιχτό browser. Διατηρείτε τον έλεγχο της σελίδας, εκτελείτε την ενέργεια και κλείνετε τον browser όταν τελειώσετε.

## Ζητήστε από τον βοηθό σας να παρακολουθήσει μία ενέργεια

Ο βοηθός προγραμματισμού σας

Χρησιμοποιήστε το REA για να εξετάσετε αυτή τη σελίδα ενώ πατάω Export notes. Ποιο αίτημα κάνει και πώς δημιουργείται το CSV;

Παράδειγμα προτροπής. Δώστε στον βοηθό σας το endpoint αποσφαλμάτωσης, `http://127.0.0.1:9222`, και το URL της σελίδας. Αφήστε τον να ξεκινήσει την καταγραφή πριν κάνετε κλικ.

Ο βοηθός σας εντοπίζει τον στόχο της σελίδας, ξεκινά ένα χρονικό διάστημα παρατήρησης και διαβάζει τα στοιχεία που προκύπτουν. Έπειτα μπορεί να εξετάσει το script πίσω από την εξαγωγή.

## Ή καταγράψτε από το τερματικό

Βρείτε το αναγνωριστικό στόχου της σελίδας:

Βρείτε τη σελίδα

```
npx -y rea-agents@latest list-browser-targets \
  http://127.0.0.1:9222 --json
```

Επιλέξτε τον στόχο με το URL του παραδείγματος σημειώσεων. Αντικαταστήστε το `TARGET_ID` παρακάτω με το αναγνωριστικό του και εκτελέστε:

Καταγράψτε τα επόμενα δέκα δευτερόλεπτα

```
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 --json
```

Αφήστε λίγα δευτερόλεπτα για να συνδεθεί η εντολή και πατήστε **Export notes** σε εκείνον τον browser. Το αποτέλεσμα φτάνει μόλις τελειώσει το χρονικό διάστημα παρατήρησης.

Το καταγεγραμμένο αποτέλεσμα περιλαμβάνει την επιλεγμένη σελίδα, τη δικτυακή δραστηριότητα σε αυτό το χρονικό διάστημα και τη δομή της απόκρισης JSON. Προγενέστερα αιτήματα βρίσκονται εκτός αυτής της καταγραφής.

## Διαβάστε το αίτημα και το script εξαγωγής

Καταγράφηκε με REA 4.1.0 στο τοπικό παράδειγμα σημειώσεων

| Καταγεγραμμένο γεγονός | Τιμή |
| --- | --- |
| Αίτημα | `GET /examples/notes-web/notes.json` |
| Απόκριση | `200 · application/json` |
| Πηγή του αιτήματος | `export.js` · script |
| Δομή απόκρισης | `notes[]` με πεδία `id` και `title` |

Διαβάστε τα φορτωμένα scripts

```
npx -y rea-agents@latest inspect-web-page \
  http://127.0.0.1:9222 TARGET_ID \
  --include-script-sources --json
```

Το αίτημα προσδιορίζει την πηγή δεδομένων και το REA καταγράφει το `export.js` ως την πηγή που το ξεκίνησε. Διαβάστε τον καταγεγραμμένο πηγαίο κώδικα του script για να δείτε πώς χρησιμοποιούνται τα δεδομένα:

export.js · απόσπασμα πηγαίου κώδικα του παραδείγματος

```
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();
```

Το αρχείο προς λήψη δημιουργείται στη σελίδα με την απόκριση JSON. Το βήμα μορφοποίησης CSV προκύπτει από το script· η καταγραφή δικτύου τεκμηριώνει ότι αυτό το κλικ ζήτησε το `notes.json`.

[Ανοίξτε το παράδειγμα](https://rea.tools/examples/notes-web/) · [Λήψη export.js](https://rea.tools/examples/notes-web/export.js) · [Λήψη notes.json](https://rea.tools/examples/notes-web/notes.json)

> Βρείτε το script που ζητά το `notes.json`. Πώς χειρίζεται τους τίτλους που περιέχουν κόμματα ή εισαγωγικά με χαρακτήρες διαφυγής;

Για μια εγκατεστημένη εφαρμογή JavaScript ή Electron, συνεχίστε με τη [ροή εργασίας εφαρμογών](https://rea.tools/guides/javascript/) για να ακολουθήσετε τα αρχεία και τα όρια διεργασιών.

Για τα σώματα αιτημάτων και αποκρίσεων HTTP, χρησιμοποιήστε το [Fiddler Everywhere: καταγραφές SAZ, MCP και δημόσιες δεξιότητες](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). Εξαγάγετε SAZ ή HAR 1.2 για Evidence καταγραφής του REA εκτός σύνδεσης ή συνδέστε τον διακομιστή MCP του Everywhere για να εξετάσετε την καταγεγραμμένη κίνηση με τον βοηθό σας.