---
title: 브라우저와 네트워크 분석—REA
url: https://rea.tools/ko/guides/browser/
---

[홈](https://rea.tools/ko/) / [가이드](https://rea.tools/ko/guides/) / 브라우저 관찰

# 클릭하면 어떤 일이 일어나는지 살펴보세요

작은 브라우저 앱에서 클릭 동작, 네트워크 요청, 다운로드를 만드는 JavaScript의 관계를 살펴봅니다.

## 내보내기를 클릭하면 어떻게 되나요?

[Notes 브라우저 예제](https://rea.tools/examples/notes-web/)에는 **메모 내보내기** 버튼이 있습니다. 클릭하면 `notes.json`를 불러와 메모 두 개를 CSV로 변환하고 다운로드를 시작합니다.

클릭에서 CSV 다운로드까지

1. 01 · 당신

   메모 내보내기를 클릭합니다

   캡처를 실행하는 동안 브라우저에서 작업을 수행합니다.
2. 02 · REA

   요청 기록

   선택한 페이지에서 요청 URL, 응답 상태, JSON 구조를 캡처합니다.
3. 03 · 코딩 에이전트

   내보내기 코드 읽기

   관찰된 요청을 `export.js`의 `fetch("./notes.json")` 호출과 연결합니다.

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

메모 내보내기를 클릭하기 전에 캡처를 시작합니다.

## 원격 디버깅을 켜고 Chrome 열기

별도 브라우저 프로필과 로컬 디버깅 포트로 호스팅된 Notes 예제를 여세요. Linux의 예:

예제 브라우저 시작

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

macOS나 Windows에서는 설치된 브라우저의 실행 파일 경로를 사용하세요. URL은 분석하려는 다른 페이지로 바꿀 수 있습니다.

REA는 이미 실행 중인 브라우저에 연결합니다. 사용자가 직접 페이지를 조작하고 필요한 동작을 수행하며, 끝나면 브라우저를 닫습니다.

## 에이전트에게 동작 하나 관찰시키기

코딩 에이전트

메모 내보내기를 클릭하는 동안 REA로 이 페이지를 분석해 줘. 어떤 요청을 보내고 CSV는 어떻게 만들어지는지 알려줘.

예제 프롬프트입니다. 에이전트에게 디버깅 엔드포인트 `http://127.0.0.1:9222`과 페이지 URL을 알려주세요. 클릭하기 전에 캡처가 시작되도록 하세요.

에이전트가 페이지 대상을 찾고 일정 시간 관찰한 뒤, 수집한 증거를 읽습니다. 이어서 내보내기에 사용된 스크립트를 살펴볼 수 있습니다.

## 또는 터미널에서 캡처

페이지의 대상 ID를 찾으세요:

페이지 찾기

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

Notes 예제 URL의 대상을 고르세요. 아래 `TARGET_ID`를 해당 ID로 바꾸고 실행하세요:

다음 10초 캡처

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

명령을 실행하고 연결될 때까지 몇 초 기다린 뒤, 해당 브라우저에서 **메모 내보내기**를 클릭하세요. 관찰 시간이 끝나면 결과가 나옵니다.

결과에는 선택한 페이지, 관찰 시간 동안의 네트워크 활동, JSON 응답 구조가 포함됩니다. 그 이전 요청은 이 캡처에 포함되지 않습니다.

## 요청 및 내보내기 스크립트 읽기

로컬 Notes 예제에서 REA 4.1.0으로 기록

| 캡처한 사실 | 값 |
| --- | --- |
| 요청 | `GET /examples/notes-web/notes.json` |
| 응답 | `200 · application/json` |
| 요청 시작자 | `export.js` · 스크립트 |
| 응답 구조 | `id`과 `title` 필드가 있는 `notes[]` |

로드된 스크립트 읽기

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

요청으로 데이터 출처를 확인할 수 있으며, REA는 `export.js`을 요청 시작 지점으로 기록합니다. 캡처한 스크립트에서 데이터 사용 방식을 확인하세요:

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 형식으로 변환하는 단계는 스크립트에서 확인할 수 있습니다. 네트워크 캡처는 이 클릭이 `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)

> `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로 내보내면 REA에서 오프라인 캡처 Evidence를 얻을 수 있으며, Everywhere의 MCP 서버를 연결하여 에이전트와 함께 캡처된 트래픽을 살펴볼 수도 있습니다.