REAReverse Engineer Anything
한국어

홈 / 가이드 / 브라우저 관찰

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

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

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

Notes 브라우저 예제에는 메모 내보내기 버튼이 있습니다. 클릭하면 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을 요청했다는 사실을 입증합니다.

예제 열기 · export.js 다운로드 · notes.json 다운로드

notes.json을 요청하는 스크립트를 찾아줘. 쉼표나 따옴표가 있는 제목은 어떻게 이스케이프해?

설치된 JavaScript·Electron 앱은 애플리케이션 분석 절차에 따라 파일과 프로세스 경계를 추적하세요.

HTTP 요청과 응답 본문을 살펴보려면 Fiddler Everywhere: SAZ 캡처, MCP 및 공개 스킬을 사용하세요. SAZ 또는 HAR 1.2로 내보내면 REA에서 오프라인 캡처 Evidence를 얻을 수 있으며, Everywhere의 MCP 서버를 연결하여 에이전트와 함께 캡처된 트래픽을 살펴볼 수도 있습니다.

상단