내가 직접 만든 디버깅 툴킷 — Claude 친구와 함께 만들고, 여러분과 공유합니다

Source: Dev.to

The problem

저는 프로덕션에서 디버깅하는 데 많은 시간을 보냅니다—이상한 JSON 응답, 이상한 토큰, 의미 없는 타임스탬프, 검증이 필요한 해시 등.
매번 같은 루틴이 반복됩니다: “base64 decode online”을 구글에 검색하고, 민감한 프로덕션 데이터를 무작위 웹사이트에 붙여넣고, 답을 얻은 뒤 넘어갑니다. 뭔가 잘못된 느낌이 들었죠.

그래서 Stingr을 만들었습니다 — 디버깅 중 실제로 필요한 도구들을 모아둔 툴킷. 모든 작업이 브라우저 안에서만 이루어지고, 데이터가 외부로 전송되지 않습니다. Claude(네, AI와 친구가 된 🤖❤️)와 함께 만들었고, 여러분에게도 도움이 되길 바라 공유합니다.

Tools I actually use at 2 am

JSON Tree Viewer

제가 가장 먼저 만들고 가장 많이 사용하는 도구입니다. 프로덕션 API가 거대한 중첩 응답을 반환하면, 깊이별로 펼치고 접을 수 있고, 특정 필드를 검색하고, 계속 확인해야 하는 경로를 고정(pin)할 수 있으며, JSONPath 쿼리(예: $.data.users[*].errors)를 실행해 정확히 필요한 데이터를 얻을 수 있습니다.

JSON Compare

“스테이징이 프로덕션과 다른 데이터를 반환하는 이유는?” 두 JSON 페이로드를 붙여넣으면 차이를 보여줍니다. 배열 항목이 이동된 경우를 감지해 모든 항목을 삭제 + 추가로 표시하지 않습니다.

JWT Decoder

“이 토큰에 관리자 권한이 포함돼 있나요?” 토큰을 붙여넣으면 헤더, 페이로드, 만료 시간을 즉시 확인할 수 있습니다.

Base64 / URL Decoder

어떤 API가 인코딩된 값을 반환하고 그 안을 빠르게 확인하고 싶을 때—브라우저 내에서 바로 디코딩합니다.

Timestamp Converter

“이 1708531200이 초인지 밀리초인지? 실제 시간은 언제인가?” 타임스탬프를 읽기 쉬운 날짜로 변환합니다.

Hash Generator & Verifier

빠른 SHA‑256 체크섬, HMAC 검증, 파일 무결성 검사를 제공합니다.

Key Case Converter

백엔드가 user_name을 반환하고 프론트엔드가 userName을 기대할 때? 클릭 한 번으로 모든 JSON 키의 케이스를 변환합니다.

전체적으로 약 40개의 도구가 포함되어 있습니다—포매터, 정규식 테스트기, 크론 파서, 텍스트 diff, 제너레이터 등—하지만 위에 소개한 것이 일상적으로 가장 많이 쓰는 도구들입니다.

Why it’s all client‑side

프로덕션을 디버깅할 때는 실제 사용자 데이터를 다룹니다. 그 데이터가 다른 사람의 서버를 통과하는 것을 원하지 않죠. Stingr은 100 % 브라우저 내에서 실행됩니다—Network 탭을 열면 요청이 전혀 없음을 확인할 수 있습니다. 해싱은 Web Crypto API를 사용하고, 나머지는 순수 JavaScript로 구현되었습니다.

How it’s built

• Framework: React + Vite
• Dependencies: 총 네 개, 별다른 복잡한 라이브러리 없음

저는 제 문제를 해결하기 위해 직접 만들었고, Claude가 혼자서는 할 수 없던 속도로 배포를 도와줬습니다. 오픈소스 프로젝트입니다:

• Site:
• GitHub: