GraphQL Network Inspector

Overview

GraphQL 을 쓰는 서비스를 개발하다 보면 브라우저 개발자 도구의 네트워크 탭에 똑같이 생긴 /graphql 요청이 줄줄이 쌓여서, 원하는 요청을 찾으려면 하나씩 열어 봐야 합니다. GraphQL Network Inspector 는 개발자 도구에 GraphQL 탭을 더해 요청을 이름별로 나눠 보여 주고, 무엇을 물어봤고(쿼리) 어떤 값을 넘겼고(변수) 무엇을 돌려받았는지(응답)를 한 화면에서 보게 해 주는 Chrome 확장 프로그램입니다.

How I built it

• 다른 도구에서 응답이 비어 보이던 문제 풀기 — 최근 Chrome 은 일부 요청(다른 도메인으로 로그인 정보를 함께 보내는 요청 등)의 응답을 확장 프로그램에 넘겨주지 않아서, 기존 GraphQL 확장들에서는 응답이 계속 “대기 중”으로 남곤 했습니다. 개발자 도구가 넘겨주는 정보와 페이지 안에서 직접 읽은 요청·응답을 함께 모아 하나로 합치는 방식으로, 빠짐없이 잡히게 했습니다.
• 한 번에 묶어 보낸 요청도 나눠 보기 — 요청 여러 개를 묶어 보내도 이름별로 나눠서 각자 자기 몫의 응답만 보여 줍니다. 파일 업로드나 나눠서 도착하는 응답 같은 형식도 알아봅니다.
• 서버 대신 원하는 응답 돌려주기 — 고른 요청에 직접 만든 응답·상태 코드·지연 시간을 돌려줘서, 서버가 준비되기 전이나 오류·느린 응답일 때 화면이 어떻게 보이는지 바로 확인할 수 있습니다. 규칙은 파일로 내보내 팀원과 나눌 수 있고, 개발자 도구를 닫으면 꺼져서 깜빡 켜 둔 채로 남을 일이 없습니다.

• 바로 실행해 보는 Playground — 서버가 어떤 데이터를 줄 수 있는지 적힌 설명서(스키마)를 불러와 문서를 보고, 자동완성이 되는 편집기에서 쿼리를 바로 실행해 볼 수 있습니다. 캡처한 요청을 그대로 가져와 고쳐서 다시 보낼 수도 있습니다.
• 내 정보는 브라우저 밖으로 나가지 않게 — 잡은 요청은 열린 패널에만 있고, 설정은 내 컴퓨터에만 저장합니다. 개발자나 다른 곳으로 보내는 데이터가 없습니다.

Release

• Chrome 웹 스토어 출시 — 2026년 11월, 현재 v0.2.0
• 한국어·영어 화면 지원
• 약 3주 동안 TypeScript 약 9천 줄 — React, 코드 편집기(Monaco), StyleX

Chrome 웹 스토어에서 보기 →