JavaScript 상태 디버깅을 덜 고통스럽게 하는 Chrome 확장 프로그램을 만들었다

Introduction

최근에 Chrome Web Store에 Dweav (Data Weave) Trace 라는 Chrome 확장 프로그램을 공개했습니다.
이 확장은 단순한 불만에서 시작되었습니다: console.log() 은 유용하지만, 앱 상태가 여러 단계, 컴포넌트, 이벤트, API 응답, 사용자 행동, 숨겨진 엣지 케이스에 걸쳐 변할 때는 그렇지 않죠. 그때 디버깅은 애플리케이션을 이해하려는 것이 아니라, 콘솔에 떠 있는 잡음 속에서 언제, 무엇이, 왜 바뀌었는지를 기억하려 애쓰는 일이 됩니다.

How Dweav Trace Works

무작위로 로그를 흩뿌리는 대신, 구조화된 상태 스냅샷을 Dweav Trace에 보내고 이를 연대순 타임라인으로 확인할 수 있습니다.

dweav(cartState, "Cart updated");
dweav(userSession, "User logged in");

각 트레이스는 특정 순간에 앱이 어떤 모습이었는지를 명확히 보여줍니다. 확장은 브라우저 사이드‑패널을 제공해 시간에 따라 이 스냅샷들을 검사할 수 있게 합니다.

Main Features

• 연대순 상태 타임라인
• 구조화된 객체 검사
• 스냅샷 라벨링
• 구조적 diff (추가, 삭제, 변경, 이동)
• 민감해 보이는 값 자동 마스킹
• 오프라인‑우선 설계 (분석, 텔레메트리, 외부 서버 없음)
• 기본 워크플로에 계정 필요 없음

Example Usage

// Checkout flow example
dweav(cart, "Initial cart");
dweav(cart, "After quantity update");
dweav(checkoutState, "Checkout started");
dweav(paymentState, "Payment form submitted");
dweav(orderResult, "Order response received");

콘솔 로그를 일일이 비교하는 대신, 의미 있는 체크포인트들의 타임라인을 얻어 흐름 속에서 상태가 어떻게 진화했는지 쉽게 파악할 수 있습니다.

Built‑In Utilities

Dweav Trace는 디버깅이나 웹 앱을 만들 때 유용한 작은 도구들도 함께 제공합니다:

• JSON 포맷터
• JWT 디코더
• Base64 인코드/디코드
• SHA‑256 해싱
• UUID 생성기
• URL 파서/툴
• 케이스 변환기
• CRON 변환기
• 클립보드 히스토리
• 로컬 진단 헬퍼

이 유틸리티들은 트레이싱 워크플로와 가깝게 배치돼 빠르게 접근할 수 있습니다.

Offline‑First Design

디버깅 데이터는 토큰, 사용자 정보, 내부 ID, API 응답 등 민감할 수 있습니다. Dweav Trace는 로컬 사용만을 목표로 설계되었습니다:

• 분석이나 텔레메트리 없음
• 외부 서버로 데이터 전송 없음
• 실수로 노출되는 것을 방지하는 자동 마스킹 내장

Chrome Web Store 페이지에는 데이터 수집 없음이 명시되어 있습니다.

Who Might Benefit

• 프론트‑엔드 개발자
• 인디 해커
• 웹 앱 제작자
• 대시보드 개발자
• 게임 UI 개발자
• 크립토 / Web3 앱 개발자
• AI 툴 제작자
• 복잡한 브라우저 상태를 디버깅하는 모든 사람

특히 앱에 여러 움직이는 파트가 있고, 시간이 흐름에 따라 상태 변화를 이해해야 할 때 유용합니다.

Comparison with DevTools

Dweav Trace는 Chrome DevTools를 대체하는 것이 아니며, 완전한 관측 플랫폼도 아닙니다. 하나의 문제에 집중합니다: 브라우저 앱을 개발·디버깅할 때 상태 변화를 더 명확히 파악하도록 돕는 것이죠.

Release & Feedback

Dweav Trace는 이제 Chrome Web Store에서 이용할 수 있습니다:

• Chrome Web Store:
• Privacy policy:

제가 듣고 싶은 피드백은 다음과 같습니다:

• 트레이싱 워크플로
• 사이드‑패널 경험
• 상태 diff 형식
• 개발자 유틸리티
• 온보딩 흐름
• 원하는 프레임워크 혹은 디버깅 패턴 지원

사용해 보시고, 유용한 점, 헷갈리는 점, 부족하거나 불필요한 점을 알려 주세요. 저는 상태가 무거운 브라우저 앱을 더 깔끔하게 디버깅하고 싶어서 Dweav Trace를 만들었으며, 다른 개발자들에게도 도움이 되길 바랍니다.