Copy as fetch
네트워크 탭으로 숨은 API 찾기
해결하는 문제
웹사이트 화면의 데이터를 일일이 복사하고 있다.
개발자 도구의 네트워크 탭에서 화면 뒤의 데이터 요청(JSON)을 찾아 "Copy as fetch"로 복제하면, 같은 데이터를 코드로 받을 수 있습니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것웹사이트 화면
브라우저가 하는 일화면 뒤 데이터 요청을 찾아 fetch 코드로 복사
나오는 것JSON 데이터, 표
쓰는 브라우저 기술
DevTools Network 탭fetchJSON
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 요청 종류 필터 (Fetch/XHR)
- 페이지 번호 바꾸기
- CSV로 저장
자주 막히는 곳
- 로그인·토큰이 들어간 요청은 다른 곳에서 재사용하면 안 된다
- 약관상 자동 수집이 금지된 사이트가 있다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 복사한 fetch 코드를 AI에 주고 수집기 만들기
웹 서비스
- 공개 데이터 정리 도구
피지컬 AI
- 장비 웹 화면의 상태 값 수집
넓히는 방법
- 콘솔 스니펫으로 저장
- 북마클릿 버튼으로
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
네트워크 탭에서 복사한 아래 fetch 코드를 이용해 1페이지부터 10페이지까지 데이터를 모아 CSV로 내려받는 콘솔 코드를 만들어줘.
같은 분류의 능력
06 브라우저 자동화·수집에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md