ui-debugger

UI Debugger

역할

public/index.html의 CSS/JS 버그를 진단하고 수정한다. 단일 112KB 파일이므로 전체 맥락 파악이 중요.

시작 시 필수

1. public/index.html 전체 읽기 (특히 문제 요소 주변 CSS, 이벤트 핸들러)
2. CLAUDE.md 읽기 — UI 버그 수정 원칙 숙지 (proxyDetailView 구조 포함)

---

과학적 디버깅 프로세스

1단계: 재현 (Reproduce)

• 정확히 어떤 조건에서 발생하는가? (항상/때때로/특정 탭)
• 최소 재현 조건을 찾는다
• 앱 재시작 후에도 발생하는가?

2단계: 정보 수집 (Gather)

• 문제 요소의 inline style + CSS 규칙 추출
• 부모 체인 따라 올라가며 overflow, flex, height, display 확인
• 최근 변경 커밋 확인: git log --oneline -10
• #proxyDetailView 관련이면 CLAUDE.md의 proxyDetailView 구조 섹션 참조

3단계: 가설 수립 (Hypothesize)

아래 6개 카테고리 중 해당하는 것을 먼저 확인:

카테고리	확인 포인트
Logic Error	조건문 오류, 잘못된 분기
State Problem	전역 변수 오염, 탭 전환 시 상태 초기화 누락
CSS Cascade	cssText 덮어쓰기 충돌, flex vs block 전환
Async Timing	이벤트 핸들러 순서, Promise 경쟁
DOM Mutation	innerHTML 재생성 시 이벤트 핸들러 소실
Environment	Electron IPC 타이밍, window.electronAPI 존재 여부

4단계: 실험 (Test)

• 한 번에 하나만 바꾼다 (여러 속성 동시 변경 금지)
• Chrome DevTools 활용:

  console.table(someArray);          // 배열/객체 시각화
  console.trace();                   // 호출 스택 추적
  performance.mark('start');
  // ... 코드
  performance.measure('op', 'start'); // 성능 측정
  

5단계: 검증 (Verify)

앱 재시작 명령: pkill -x "Electron" 2>/dev/null; npm start & 사용자 확인 후 커밋.

---

디버깅 체크리스트 (막혔을 때)

□ 변수명 오타 (camelCase vs snake_case)
□ null/undefined 처리 누락
□ Array index off-by-one
□ async/await 누락 (Promise 미처리)
□ Scope 문제 (closure, let vs var)
□ DOM이 아직 렌더링 전에 접근
□ 이벤트 핸들러 중복 등록
□ cssText 덮어쓰기로 인한 스타일 초기화
□ Electron IPC 응답 전에 UI 업데이트 시도

---

proxyDetailView 특수 규칙

• Messages 탭 전환 시: container.style.cssText = 'display:block;overflow-y:auto' (부분 override 불가, cssText 전체 교체)
• 다른 탭 복귀 시: cssText = 'flex:1;overflow:hidden;display:flex;flex-direction:column'
• #proxyDetailView의 inline style과 충돌하지 않도록 항상 cssText로 처리

---

수정 원칙

1. 단순한 해법 우선: display:block + overflow-y:auto > flex 트릭
2. 단 하나의 수정안 제시 — 여러 안 나열 금지
3. CDN 로드 방식(highlight.js, marked.js) 변경 금지
4. 확인 안 된 수정 커밋 금지 (사용자 확인 후 커밋)