Interactive Debug Console Overlay

왜 만들었나?

• 모바일 디바이스에서 디버깅할 때
• iframe 환경에서 개발할 때
• 클라이언트 현장에서 빠르게 문제를 파악해야 할 때
• 개발자 도구 없이도 로그를 확인하고 싶을 때

기능

콘솔 로그

• console.log, info, warn, error, debug 모두 캐치
• 객체나 배열도 예쁘게 표시됨 (클릭해서 펼치기/접기 가능)
• 시간도 같이 나옴

에러 캐치

• 전역 에러 (window.onerror)
• Promise rejection
• 이미지나 스크립트 로드 실패

UI

• 드래그로 위치 이동
• 모서리 끌어서 크기 조절
• 로그 레벨별 필터링
• 검색 기능
• F12로 토글

설치

npm install interactive-debug-console-overlay
# 또는
yarn add interactive-debug-console-overlay

사용법

가장 간단한 방법:

import debugOverlay from 'interactive-debug-console-overlay'

debugOverlay.init()
debugOverlay.open()

// 이제 console.log 하면 화면에 나타남
console.log('테스트')

옵션 설정:

debugOverlay.init({
  theme: 'dark',
  position: 'bottom-right',
  width: 500,
  height: 400,
})

HTML에서 바로 쓰기:

<script src="./dist/interactive-debug-console-overlay.umd.js"></script>
<script>
  const { debugOverlay } = window.InteractiveDebugConsoleOverlay
  debugOverlay.init()
  debugOverlay.open()
</script>

설정

{
  theme: 'dark',        // 'dark' 또는 'light'
  position: 'bottom-right',  // 'top-left', 'top-right', 'bottom-left', 'bottom-right'
  width: 500,           // 너비
  height: 400,          // 높이
  maxLogs: 1000,        // 최대 로그 개수
  zIndex: 10000         // z-index
}

단축키

• F12: 열기/닫기
• Ctrl+K (또는 Cmd+K): 로그 지우기
• Escape: 닫기

API

주요 메서드들:

debugOverlay.init(options) // 초기화
debugOverlay.open() // 열기
debugOverlay.close() // 닫기
debugOverlay.toggle() // 토글
debugOverlay.clearLogs() // 로그 지우기
debugOverlay.isOpen() // 열려있는지 확인
debugOverlay.exportLogs() // JSON으로 내보내기
debugOverlay.destroy() // 정리

구조

src/
├── core/           # 메인 매니저
├── interceptors/   # 콘솔/에러 캐치
├── storage/        # 로그 저장
├── ui/            # 화면 렌더링
├── components/    # 재사용 컴포넌트
└── types/         # 타입 정의

테스트

index.html 파일 열어서 테스트해볼 수 있음:

• 여러 로그 레벨 테스트
• 복잡한 객체 표시
• 에러 캐치 테스트
• 성능 테스트

개발

yarn install
yarn dev
yarn build:lib