---
title: Analiza przeglądarek i sieci — REA
url: https://rea.tools/pl/guides/browser/
---

[Spis treści](https://rea.tools/pl/) / [Przewodniki](https://rea.tools/pl/guides/) / Obserwacja przeglądarki

# Zobacz, co się stanie po kliknięciu.

Użyj małej aplikacji przeglądarki, aby połączyć akcję, jej żądanie sieciowe i JavaScript, który tworzy plik do pobrania.

## Co się stanie po kliknięciu przycisku Eksportuj?

The [Przykład przeglądarki notatek](https://rea.tools/examples/notes-web/) ma **Eksportuj notatki** przycisk. Kliknięcie go ładuje `notes.json`, formatuje dwie notatki jako CSV i rozpoczyna pobieranie.

Od kliknięcia do pobrania CSV

1. 01 \* Ty

   Kliknij Eksportuj notatki

   Wykonaj akcję w przeglądarce, gdy przechwytywanie jest uruchomione.
2. 02 \* REA

   Zapisz żądanie

   Przechwyć adres URL żądania, status odpowiedzi i strukturę JSON z wybranej strony.
3. 03 \* Twój agent

   Przeczytaj kod eksportu

   Połącz obserwowane żądanie z `fetch("./notes.json")` w `export.js`.

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

Rozpocznij przechwytywanie przed kliknięciem Eksportuj notatki.

## Otwórz Chrome ze zdalnym debugowaniem

Otwórz przykład hostowanych notatek za pomocą oddzielnego profilu przeglądarki i lokalnego portu debugowania. Na Linux :

Uruchom przykładową przeglądarkę

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

Użyj ścieżki wykonywalnej zainstalowanej przeglądarki na macOS lub Windows . Możesz zastąpić adres URL strony inną stroną, którą chcesz sprawdzić.

REA łączy się z tą istniejącą przeglądarką. Zachowujesz kontrolę nad stroną, wykonujesz akcję i zamykasz przeglądarkę po zakończeniu.

## Poproś swojego agenta, aby obejrzał jedną akcję

Twój agent kodowania

Użyj REA, aby sprawdzić tę stronę, gdy klikam Eksportuj notatki. Jakie jest żądanie i jak zbudowany jest CSV?

Przykładowy monit. Daj swojemu agentowi punkt końcowy debugowania, `http://127.0.0.1:9222`, oraz adres URL strony. Pozwól mu rozpocząć przechwytywanie, zanim klikniesz.

Twój agent odkrywa cel strony, uruchamia okno obserwacji i odczytuje wynikowe dowody. Następnie może sprawdzić skrypt za eksportem.

## Lub przechwytywanie z terminala

Znajdź identyfikator docelowy strony:

Znajdź stronę

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

Wybierz cel z przykładowym adresem URL notatek. Wymienić `TARGET_ID` poniżej z jego ID, a następnie uruchom:

Uchwyć następne dziesięć sekund

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

Pozwól poleceniu połączyć się przez kilka sekund, a następnie kliknij **Eksportuj notatki** w tej przeglądarce. Wynik pojawia się po zakończeniu okna obserwacji.

Przechwycony wynik obejmuje wybraną stronę, aktywność sieciową w tym oknie oraz kształt odpowiedzi JSON. Wcześniejsze żądania są poza tym przechwytywaniem.

## Przeczytaj skrypt żądania i eksportu

Nagrany z REA 4.1.0 na przykładzie notatek lokalnych

| Uchwycony fakt | Wartość |
| --- | --- |
| Prośba | `GET /examples/notes-web/notes.json` |
| Odpowiedź | `200 · application/json` |
| Inicjator żądania | `export.js` \* skrypt |
| Struktura odpowiedzi | `notes[]` z `id` oraz `title` pola |

Przeczytaj załadowane Skrypty

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

Żądanie identyfikuje źródło danych i rekordy REA `export.js` jako jego inicjator. Przeczytaj przechwycone źródło skryptu, aby zobaczyć, jak dane są używane:

export.js \* przykładowy fragment źródła

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

Pobieranie jest konstruowane na stronie przy użyciu odpowiedzi JSON. Krok formatowania CSV pochodzi ze skryptu; przechwytywanie sieci ustala, że to kliknięcie jest wymagane `notes.json`.

[Otwórz przykład](https://rea.tools/examples/notes-web/) · [Pobierz export.js](https://rea.tools/examples/notes-web/export.js) · [Pobierz notes.json](https://rea.tools/examples/notes-web/notes.json)

> Znajdź skrypt, który żąda `notes.json`. Jak uniknąć tytułów zawierających przecinki lub cudzysłowy?

W przypadku zainstalowanej aplikacji JavaScript lub Electron Kontynuuj [przepływ pracy aplikacji](https://rea.tools/guides/javascript/) aby śledzić pliki i granice procesów.

Aby zbadać treść żądań i odpowiedzi HTTP, użyj [Fiddler Everywhere: zapisów SAZ, MCP i publicznych umiejętności](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md). Wyeksportuj SAZ lub HAR 1.2, aby uzyskać Evidence z zapisu w REA offline, lub połącz serwer MCP Everywhere, aby analizować zapisany ruch z agentem.