Media
3 items
Description
DevTools Network 탭보다 쉬운 API 요청 뷰어. QA/PM/퍼블리셔를 위한 팀 협업 워크플로 도구. Lenswork는 Chrome DevTools 안에 Network 탭보다 읽기 쉬운 API 요청 뷰어를 추가하는 개발자 도구입니다. 백엔드 응답을 확인해야 하는 QA, PM, 퍼블리셔부터 API 디버깅이 잦은 프론트엔드 개발자까지, 팀 협업 워크플로를 돕기 위해 만들었습니다. 사용 방법 설치 후 툴바 아이콘을 눌러도 아무 창이 뜨지 않습니다 — Lenswork는 별도 팝업이 아니라 Chrome 개발자 도구 안에 새 탭으로 추가되는 패널이기 때문입니다. F12(또는 우클릭 → "검사")로 개발자 도구를 연 뒤, Elements· Console·Network 옆에 있는 "Lenswork" 탭을 클릭하면 됩니다. 주요 기능 ▸ 보기 편한 요청/응답 뷰어 - 접기/펼치기 가능한 JSON 트리 뷰 (타입별 색상, 중첩 가이드라인) - JSON이 아니면 원문 텍스트로 자동 폴백 - 메서드·상태코드 컬러 배지, 응답 크기 표시, 4xx/5xx·1초 이상 요청 강조 - 다크/라이트 테마 자동 감지 + 수동 전환 ▸ 세션을 넘어서는 기록 - 최근 요청 최대 200건을 자동 저장, 패널을 다시 열어도 복원 - 원하는 요청만 이름을 붙여 "스냅샷"으로 별도 보관 ▸ 팀 공유를 위한 내보내기 - 클릭 한 번으로 cURL 명령어 복사 - HAR 1.2 내보내기 (Postman/Bruno 등 HAR을 지원하는 도구에서 바로 import) - Postman Collection v2.1 형식으로 내보내기 (baseUrl 변수 자동 추출) - 응답 JSON에서 TypeScript interface 자동 추출 후 클립보드 복사 ▸ 개발자를 위한 고급 기능 - GraphQL 요청 자동 감지 및 Query/Variables 분리 표시 - 같은 요청의 이전 응답과 현재 응답을 비교하는 응답 diff - 정적 리소스(폰트·이미지·CSS·JS)와 Next.js RSC 내부 통신 자동 숨김 - URL/본문 통합 검색, 메서드·상태코드·페이지별 필터 - 다중 선택 후 일괄 삭제·스냅샷 저장 개인정보 및 데이터 Lenswork는 사용자가 이미 DevTools에서 보고 있는 네트워크 요청 정보만 읽으며, 이를 외부 서버로 전송하지 않습니다. 모든 기록은 브라우저 로컬 저장소(chrome.storage.local)에만 저장되고, 확장 프로그램을 제거하면 함께 삭제됩니다. 데이터를 외부와 공유하는 유일한 경로는 사용자가 직접 실행하는 복사/내보내기 기능뿐입니다. 참고 Lenswork는 Postman, Bruno와 제휴 관계가 아니며, 두 제품명은 파일 포맷 호환성(HAR 1.2, Postman Collection v2.1)을 설명하기 위해서만 언급됩니다.