패널 레퍼런스

@platform/vue-debugger(현재 0.17.4)는 11개 패널로 구성됩니다. 각 패널은 하나의 "관점"입니다. 컴포넌트의 값이 어디서 왔는지, 어떤 요청이 오갔는지, 상태가 언제 바뀌었는지를 페이지 안에서 보여줍니다. 브라우저 확장도 데스크톱 devtools도 없는 모바일 WebView에서 이 도구가 유일한 디버깅 수단이기 때문에, 패널들은 데스크톱 콘솔이 하던 일을 화면 위에서 대신합니다.

이 페이지는 패널마다 "무엇을 하나 → 핵심 기능 → 언제 보나 → 주의·한계" 순으로 정리한 레퍼런스입니다. 패널을 켜고 끄는 단축키와 옵션은 옵션 레퍼런스를, 스택을 원본 코드 위치로 복원하기 위한 소스맵 설정은 환경별 설정을 참고하세요.

패널 공통 — 탭, 도크, 인스펙션

본격적인 패널 설명에 앞서, 모든 패널이 공유하는 조작 방식을 먼저 익혀 두면 이후가 편합니다.

• 여는 법: 우측 하단의 ⚙ FAB를 탭하거나 Alt+Shift+D를 누릅니다. FAB는 드래그로 위치를 옮길 수 있습니다.
• 닫는 법: 상단 ✕ 버튼 또는 Alt+Shift+D. 디버거에 포커스가 있을 때는 Esc로도 닫힙니다 — 값 편집·검색 입력·도움말 팝오버 안의 Esc는 그 컨텍스트만 취소하고, 호스트 앱에서 누른 Esc(모달 닫기 등)는 가로채지 않습니다(0.17.1). 패널을 닫으면 선택 컴포넌트의 변경 추적도 함께 정지합니다("검사 안 하면 비용 0").
• 탭 고정: 탭을 길게 누르면 고정/해제됩니다. 자주 쓰는 탭이 앞으로 당겨지고 점으로 표시됩니다.
• 도크·전체화면: 패널 상단 버튼으로 **도크 위치(하단 / 좌 / 우 드로어)**를 바꾸고, 전체화면을 토글합니다. 모바일에서 좁은 화면을 넓게 쓸 때 유용합니다.
• 섹션 접기: 패널 안의 각 섹션은 접고 펼칠 수 있으며, 그 상태를 기억합니다.
• 탭 전환 즉각화: 탭을 다시 열 때 패널을 재생성하지 않고 캐시(KeepAlive)하므로, 저사양 PC에서도 전환이 즉각이고 검색·필터 상태가 유지됩니다.

빈 패널은 "고장"이 아닙니다

패널이 비어 있다면 대개 아직 그 사건이 일어나지 않았을 뿐입니다. 화면을 조작(버튼 클릭·화면 이동·요청)하면 기록이 쌓입니다. 어디부터 볼지 모르겠다면 정보 패널의 "증상별 시작점"에서 출발하세요.

컴포넌트

화면에 보이는 Vue 컴포넌트 트리를 탐색하고, 선택한 컴포넌트의 모든 값이 **어디서 왔는지(출처)**와 무엇 때문에 다시 그려졌는지를 보여줍니다. 데스크톱 devtools의 컴포넌트 인스펙터에 해당하지만, 모바일에서도 동작하고 출처 추적이 한 단계 더 깊습니다.

핵심 기능

• 인스펙션 모드: 툴바의 화면에서 선택(⌖)을 켜고 화면 요소를 탭하면 그 컴포넌트가 선택됩니다(Esc로 종료). 모바일에서는 드래그로 훑으며 고를 수 있습니다.

• 트리 검색/접기: 컴포넌트가 수백 개여서 스크롤이 길 때 — 🔍 검색으로 이름을 좁혀 점프하고(매치 강조 + 조상 경로만 표시), ▸/▾ 캐럿(또는 행에서 ←/→ 키)으로 가지를 접고, **⊟/⊞**로 모두 접기/펴기 합니다. ↑/↓ 키로 행을 이동하고, 접힌 가지 안의 노드를 선택하면 조상이 자동으로 펼쳐집니다. (8443 데모: /#/lab/tree)

• 가상화: 화면 분량(~30행)만 DOM에 그리므로 '모두 펼치기'한 초대형 트리도 부드럽습니다(저사양 PC·모바일 체감↑). 선택행이 화면 밖이면 자동으로 스크롤합니다.

• 노드 수 표기: 트리 헤더에 컴포넌트 N개를, 5000 상한에 닿으면 N / 5000 (상한 — 일부 생략될 수 있음)으로 보여줍니다.

• 출처 칩(provenance): 값마다 어디서 왔는지를 칩으로 표시합니다.

  칩	의미	고칠 위치
  prop ← 부모	부모 컴포넌트가 내려준 값	부모
  pinia ← 스토어.필드	전역 Pinia 스토어에서 옴	여러 화면이 공유 — 다른 곳일 수 있음
  computed	다른 값으로 계산된 값(직접 못 바꿈)	"게터 소스 보기"로 계산식 확인
  local	이 컴포넌트가 직접 만든 ref/reactive	여기

• 식 평가 (모바일 콘솔 대체): 선택한 컴포넌트 스코프에서 items.length·store.checkout()·count = 5 같은 식을 바로 평가합니다. "탭해서 넣기" 칩이 그 스코프에서 쓸 수 있는 이름 전부를 제공합니다. 템플릿처럼 count로 쓰며(.value를 붙이면 자동으로 떼고 안내), 인스턴스 전체는 $vm으로 접근합니다.

• 왜 다시 그려졌나: Vue의 renderTriggered 훅으로 이 컴포넌트의 리렌더를 유발한 반응성 키를 종류(set/add/delete/clear)별로 집계합니다. 같은 키가 과도하면 불필요한 리렌더, 안 바뀔 줄 알았던 키면 새는 의존성 신호입니다.

• 변경 히스토리: 선택 이후 값의 변화와 **직전 3초의 이벤트(원인 후보)**를 시간순으로 보여줍니다. 추적은 패널을 닫거나 선택 컴포넌트가 언마운트/KeepAlive 비활성화되면 자동 정지합니다(0.17.1 — 비활성 컴포넌트를 디버거가 계속 재계산하지 않게).

언제 보나 — "화면 값이 이상한데 어디를 고쳐야 할지" 모를 때 가장 먼저 엽니다. 출처 칩이 "고칠 곳"을 가리킵니다.

값이 전부 비거나 undefined라면

트리는 보이는데 State 값·출처 칩·식 평가가 모두 비어 있다면 배포(production) 빌드라서 컴포넌트 introspection이 꺼진 것입니다. 검증계 빌드에서 __VUE_PROD_DEVTOOLS__: 'true'를 켜야 setup 바인딩이 노출됩니다. renderTriggered도 같은 조건(dev 또는 __VUE_PROD_DEVTOOLS__)에서만 발화합니다. 자세한 이유는 환경별 설정을 보세요.

네트워크

XHR과 fetch를 가장 바닥에서 캡처합니다. axios 인스턴스가 몇 개든 등록 없이 전부 기록되며, 요청·응답·소요시간·상태를 한눈에 봅니다.

핵심 기능

• 바닥 캡처: XMLHttpRequest/fetch를 직접 관찰하므로 axios·ky 등 어떤 클라이언트를 써도 전부 잡힙니다.
• 행 펼치기: 행을 탭하면 요청 본문·응답 본문(JSON 트리)·content-type·전송 경로(via)와 이 요청을 보낸 코드 위치 스택을 봅니다.
• 호출 위치 복원(소스맵): 난독화된 스택을 원본으로 되돌리고, 개발자 코드 프레임을 앞에서부터 최대 5스텝 강조합니다(가장 깊은 줄엔 호출 위치 → 배지). 공통 모듈만이 아니라 그 위 호출자까지 보입니다.
• axios 호출 위치 복원(traceAxios): axios는 내부 비동기 경계로 전송 시점엔 호출 체인이 끊겨, 호출 위치에 axios 내부 프레임만 보입니다. 인스턴스에 traceAxios를 한 줄 적용하면 호출 시점에 체인을 잡아 onMounted부터의 전체 호출자를 복원하고, 요약에 '· axios 호출 위치에서 복원(traceAxios)' 출처를 표기합니다(옵트인, 동작 무영향·헤더 무주입).
• 맥락(breadcrumb): 펼치면 이 요청 직전에 일어난 일(🖱️클릭·🧭네비게이션·🌐직전 요청 등)을 시간순으로 보여줍니다. 콜스택이 아니라 인과 맥락이며, .then·타이머·이벤트 같은 비동기 경계로 호출 위치가 끊겨도 "무엇이 이 요청을 이끌었나"는 남습니다(Sentry/Datadog 방식, 스택 캡처 없이 저비용).
• 헤더(요청/응답): 요청·응답 HTTP 헤더를 펼쳐 봅니다 — 401(Authorization)·CORS(Access-Control-*)·캐시(Cache-Control·ETag)·쿠키(Set-Cookie) 디버깅에 씁니다. 인증·쿠키는 평문 표시되니 화면 공유에 주의하고(리포트로 내보낼 땐 마스킹), cURL 복사에도 헤더가 포함됩니다.
• cURL로 복사: 요청을 curl 명령(헤더·본문 포함)으로 복사해 터미널·동료에게 그대로 재현시킵니다.
• 느린 요청 강조: 소요 시간이 1초 초과는 노랑, 3초 초과는 빨강으로 군집화됩니다.
• 필터: URL 필터와 "실패만" 토글로 좁힙니다. AbortController 등으로 취소된 요청은 빨간 '실패'가 아니라 중립 '취소'로 표시되고 "실패만"에서 제외됩니다(0.17.2) — 검색 자동완성 취소 같은 정상 동작을 네트워크 장애로 오진하지 않게.
• 제외: ignoreUrls 옵션으로 APM/텔레메트리 비콘을 추적에서 뺍니다.

언제 보나 — API가 안 불리는지, 어떤 인자로 호출됐는지, 응답이 무엇이었는지, 무엇이 느린지 확인할 때.

콜스택이 끊겼다면 — 맥락(breadcrumb)을 보세요

.then·setTimeout·requestAnimationFrame·DOM 이벤트 경계 너머에서 보낸 요청은 호출자 콜스택을 복원할 수 없습니다(엔진 한계 — Sentry·Datadog도 동일). 대신 **맥락(breadcrumb)**이 "직전에 무엇을 클릭/이동했나"를 보여줍니다. 어떤 경계가 복원되고 안 되는지는 8443 플레이그라운드의 **콜스택 복원 데모(/#/lab/callstack)**에서 코드+실행 버튼으로 직접 비교할 수 있습니다.

APM 비콘으로 탭이 더러워진다면

사내 APM(Datadog/New Relic/Sentry)이나 자체 텔레메트리가 3~5초마다 비콘을 쏘면 탭이 가득 찹니다. attachDebugger의 ignoreUrls: ['/apm', /datadog|newrelic|sentry/]로 그 패턴을 빼고 "진짜 요청"만 보세요.

상한과 래핑 충돌

버퍼는 상한(기본 500건)이 있어 오래된 요청은 버려집니다(상단에 몇 건 버려졌는지 고지). 또 다른 툴이 이미 fetch를 감쌌다면 정보 패널에 "래핑 충돌"이 표시됩니다 — 호출 위치·타이밍이 어긋날 수 있다는 뜻입니다.

Pinia

Pinia 스토어의 상태 트리를 보고 인라인 편집하며, 액션/뮤테이션 로그와 타임트래블을 제공합니다. Pinia는 import하지 않고 런타임에 구조적으로 발견하므로, 없는 프로젝트에서는 패널이 빈 상태로 표시됩니다.

핵심 기능

• 상태 트리 편집: 값 옆 ✎로 원시값을 인라인 편집합니다. 내부적으로 $patch로 적용되며, 배열·객체 안쪽의 leaf도 경로로 지목해 바꿀 수 있습니다. 적용 후 토스트에서 1클릭 되돌리기를 제공합니다.
• 액션 로그: 액션 이름·인자·소요시간·에러·진행 중 여부를 기록하고, 그 액션을 호출한 코드 위치 스택을 펼쳐 봅니다.
• 뮤테이션 로그: 상태가 바뀐 사건을 "어떤 방법으로 바꿨는지" 라벨(직접 변경 / $patch(객체) / $patch(함수))과 함께 보여줍니다.
• 타임트래블: 뮤테이션마다 바뀐 키의 before/after diff를 side-by-side로 정렬하고, ↶ 되돌리기로 그 변경 직전 상태로 스토어를 복원합니다. 로그 내보내기로 액션·뮤테이션 로그(스냅샷 포함)를 JSON 파일로 저장해 팀과 공유합니다.

언제 보나 — "이 값을 누가 언제 어떻게 바꿨나", 느린/실패한 액션 찾기, 의심 상태를 인라인 편집으로 즉석 재현할 때.

되돌리기의 범위

↶ 되돌리기는 스토어 상태만 직전 값으로 돌립니다 — 컴포넌트 로컬 상태나 DOM은 따라오지 않습니다. 또 디버거는 상태를 임의 과거 시점으로 되감지는 못합니다(L2 포렌식 한계). 재현은 식 평가의 $patch/액션 호출로 직접 합니다.

스토리지

localStorage·sessionStorage를 보기·편집·삭제하고 쿠키를 조회하며, 무엇이 그 키를 썼는지와 누가 그 키를 읽는지를 호출 스택으로 보여줍니다.

핵심 기능

• 세 영역: localStorage / sessionStorage / Cookie 탭. 쿠키는 조회 전용입니다(HttpOnly 쿠키는 JS에서 보이지 않음).
• 검색·개수·복사: 키 또는 값으로 검색해 좁히고(매치 강조), 헤더에 전체 키 개수를 표시하며, 각 행의 값을 클립보드로 복사합니다. 항목 목록은 가상화되어 수천 개여도 렉이 없습니다(대용량 세션 스토리지).
• 편집·추가·삭제: 키/값을 추가·편집·삭제하고, 삭제 시 토스트에서 되돌릴 수 있습니다. JSON 값은 자동으로 들여쓰기해 펼쳐 보여줍니다(토큰·직렬화 객체 디버깅).
• 변경 로그: set/remove/clear 사건을 시간순으로 기록하고, 쓴 코드의 호출 스택을 소스맵으로 복원해 펼쳐 봅니다. 값 미리보기는 2,000자에서 절단해 보관합니다(수 MB 값이 버퍼·리포트를 채우지 않게 — 현재 값 전문은 위 항목 목록에서).
• 🔗 읽기 의존성 맵 0.17 — "어느 코드가 이 키를 읽는가"를 키별로 역인덱스해 보여줍니다(읽기 횟수·고유 출처 위치, 소스맵 복원). 기준정보(마스터데이터)의 암묵적 의존성을 명시화해 "이 키 지워도 되나 / 누가 쓰나"에 런타임 증거로 답합니다 — 동적 키(code.${type})·서드파티 읽기는 grep이 못 잡고 이 맵만 잡습니다. trackReads로 끌 수 있습니다(기본 on).

언제 보나 — 토큰·플래그가 언제 사라졌는지, 어떤 코드가 스토리지를 덮어쓰는지, 기준정보 키를 누가 읽는지 추적할 때.

읽기 의존성 맵은 "관측 기반"입니다 0.17

getItem() 호출만 봅니다 — storage['k']·점 접근은 스펙상 잡히지 않고, 실행 안 된 경로·캡처 예산(키당 고유 출처 16곳)을 넘긴 출처도 안 보일 수 있습니다. "출처 0곳 ≠ 아무도 안 읽음" — 패널에도 같은 고지가 표시되며, 키 삭제 결정의 단독 근거로 쓰지 마세요.

민감한 키 보호

token·auth·jwt 등 민감해 보이는 키는 삭제 전 한 번 확인합니다(삭제 후 되돌리기 가능). 디버거 자체가 쓰는 키는 ignoreStorageKeys로 변경 로그에서 숨길 수 있습니다.

연쇄 🔗

watch 사이드이펙트를 추적합니다. "한 번의 상태 변경이 부른 후속 효과들"(fetch·또 다른 변경·라우팅)을 시간 인과로 묶은 계단식 트리를 보여줍니다.

핵심 기능

• 인과 트리: 트리거(상태 변경)를 머리로, 그 직후 일어난 효과들을 가지로 묶어 보여줍니다. 효과 수·변경 수를 헤더에 요약하고, 각 효과의 호출 코드 위치 스택을 펼쳐 봅니다.
• 연쇄 경보: 깊거나 과도한 연쇄에는 "⚠ 연쇄 경보"를 붙입니다. "연쇄 경보만" 필터로 그것만 추려 봅니다.

언제 보나 — 무한 루프성 watch, "값 하나 바꿨더니 요청 다섯 개가 나가는" 사슬, 의도치 않은 라우팅 같은 연쇄 반응을 추적할 때.

"추정"이라는 점을 기억하세요

디버거는 watch의 의존성 그래프를 직접 읽을 수 없습니다(Vue의 한계). 대신 시간상 0.15초 이내로 바짝 붙어 일어난 사건들을 하나의 연쇄로 묶습니다. 대부분 맞지만, 우연히 같은 시점에 일어난 무관한 사건이 함께 묶일 수 있습니다. 부모-자식 관계는 "반드시 일으켰다"는 증명이 아니라 강한 단서로 쓰세요. (네트워크는 응답 도착이 아니라 요청 시작 시각으로 묶어 watch→fetch를 정확히 연결합니다.)

에러

Vue 컴포넌트 에러·전역 window.onerror·unhandledrejection을 수집하고, 발생 위치를 원본 코드로 복원해 보여줍니다.

핵심 기능

• 세 출처: Vue 컴포넌트(errorHandler) / 전역(window) / Promise 미처리로 분류하고, Vue 에러는 발생 컴포넌트(<Name>)와 라이프사이클 단계(info)를 함께 표시합니다. 0.17부터 브리지 호출의 rejection도 Promise 미처리로 재보고됩니다(디버거 관측이 전역 unhandledrejection을 가로채는 것의 보상 — 배경).
• 원본 위치 복원: 스택을 소스맵으로 복원해 "에러 발생 위치(개발자 코드)"를 보여줍니다.
• 맥락(breadcrumb): 이 에러 직전에 일어난 일(클릭·네비게이션 등)을 시간순으로 보여줍니다 — "무엇을 하다 터졌나"라는 디버깅 1순위 질문에 답합니다. 비동기 경계로 스택이 끊겨도 맥락은 남습니다.

언제 보나 — 잡히지 않은 에러, 처리되지 않은 Promise 거부, 컴포넌트 렌더 에러를 한곳에서 확인할 때.

소스맵이 없으면 복원되지 않습니다

배포 빌드의 난독화 스택을 src/…:줄 (함수)로 되돌리려면 빌드에 sourcemap: 'hidden'(또는 true)이 필요합니다. 없으면 chunk.js:줄로만 보입니다. 설정은 환경별 설정을 보세요. 또 콜백·.then으로 끊긴 비동기 호출은 원래 호출자가 스택에 안 남을 수 있습니다(엔진 한계).

콘솔

console.*(log/info/warn/error/debug) 출력을 모아 봅니다. 모바일 WebView에는 콘솔이 없으므로 콘솔 출력을 볼 유일한 창구입니다.

핵심 기능

• 인자 보존: 문자열 인자는 그대로, 객체 인자는 JSON 트리로 직렬화해 보존합니다.
• 레벨 필터: log/info/warn/error/debug를 다중 선택으로 켜고 끕니다("전체" 마스터 토글).
• 호출 스택: warn·error 행에만 "이 로그를 찍은 코드 위치" 스택을 소스맵으로 복원해 붙입니다.

언제 보나 — 폰에서 console.log를 볼 때, 경고/에러가 어느 줄에서 났는지 추적할 때.

log의 위치를 추적하고 싶다면

log·info·debug는 일부러 위치를 잡지 않습니다 — 수백·수천 번 쏟아질 때 매번 스택을 뜨면 폭주 시 느려지기 때문입니다. 특정 log의 위치가 필요하면 그 줄만 잠깐 console.warn으로 바꿔 보세요.

Router

현재 라우트와 네비게이션 타임라인을 보여주고, 어느 가드가 이동을 막았는지 귀속합니다. vue-router는 import하지 않고 런타임에 발견합니다.

핵심 기능

• 현재 라우트: fullPath·name·params·query·meta와 중첩 라우트 매칭 체인.
• 네비게이션 타임라인: 각 이동의 결과(성공/리다이렉트/가드 차단/중복/취소)를 한국어로 표시하고, 소요시간과 이 이동을 시작한 코드 위치 스택을 봅니다.
• 가드 귀속: 이동이 막히면 "막은 가드"를 한 줄로 귀속합니다. 라우트별 beforeEnter는 자동으로 잡히고, 전역 beforeEach/beforeResolve는 차단(false 반환)인지 리다이렉트 → 대상인지까지 보여줍니다.

언제 보나 — "왜 이 화면으로 못 들어가지", 권한 가드가 의도대로 막는지, 리다이렉트가 어디서 발생하는지 추적할 때.

전역 가드는 등록 순서가 중요합니다

전역 beforeEach/beforeResolve는 디버거 attach 이후 등록된 것만 귀속됩니다(이미 등록된 건 vue-router가 내부 리스트를 비공개로 두기 때문). 전역 가드를 추적하려면 가드 등록 직전에 traceGuards(router) 한 줄을 추가하세요 — 자세한 내용은 라우터 가드 추적을 보세요. 가드 소스는 vue-router가 파일:줄을 주지 않아 코드 텍스트로 표시됩니다.

브리지 📱

WebView↔네이티브 브리지 호출을 들여다봅니다. 실기기 앱 WebView에는 devtools가 없어 JS↔네이티브 트래픽을 볼 방법이 없는데, 이 패널이 유일한 창구입니다.

핵심 기능

• 자동 감지: iOS WKWebView(webkit.messageHandlers)·React Native·Flutter는 이름 없이 자동 감지·래핑됩니다.
• 호출 로그: 모든 호출의 인자·반환·소요시간·에러와 이 브리지를 호출한 코드 위치 스택을 기록합니다.
• 수동 호출: 브리지·메서드를 고르고 JSON 인자를 넣어 네이티브 트리거 없이 직접 호출해 테스트합니다.
• 환경 지문: 실행 플랫폼·WebView 여부·UA를 표시합니다.
• 후보 스캔: 이름을 모르면 "의심 후보 스캔"으로 [native code] 메서드를 가진 객체를 제시합니다(자동 래핑은 안 해 오탐 무해).

언제 보나 — 네이티브 연동이 실패하는지, 어떤 인자로 호출했고 무엇을 반환받았는지, 네이티브 없이 브리지를 단독 테스트할 때.

Android 커스텀 브리지는 이름이 필요합니다

Android @JavascriptInterface의 커스텀 객체는 표준 surface가 아니라 자동 감지가 안 됩니다. bridges 옵션(예: bridges: ['AndroidBridge'])으로 객체 이름을 지정하거나, 패널에서 "이름으로 추가"하세요. 객체가 아직 주입되기 전이면 디버거가 폴링하며 기다립니다.

리포트 🐞

현재 상황을 통째로 JSON으로 캡처해 공유하고, 받은 사람이 같은 디버거로 다시 열람하게 합니다. 운영자가 폰에서 버그를 재현해 캡처하고, 개발자가 데스크톱에서 그대로 다시 보는 흐름을 위해 설계됐습니다.

핵심 기능

• 상황 캡처: 타임라인·네트워크·스토어 상태·스토리지·에러를 한 파일로 묶습니다. 에러·스토리지 변경은 원본 코드 위치까지 복원해 담깁니다. 한 줄 메모를 덧붙일 수 있습니다.
• 공유: JSON 복사·파일 저장. 클립보드가 막힌(비보안 컨텍스트) 경우 자동으로 파일 저장으로 대체됩니다.
• 사내 전송(옵트인): report.endpoint를 설정하면 "사내 전송" 버튼이 생겨 폐쇄망 수집 URL로 POST합니다(미설정이면 버튼 없음). 이 URL은 네트워크 추적에서 자동 제외됩니다.
• 다시 열람: "리포트 불러오기"로 JSON을 읽어 요약·환경·실패한 요청·에러·타임라인·캡처 시점 스토어 상태를 이 화면에서 그대로 봅니다.

언제 보나 — 재현이 어려운 버그를 운영자가 잡아 개발자에게 넘길 때, "그때 무슨 일이 있었나"를 통째로 보존할 때.

리포트는 민감 정보를 담습니다 — 외부 SaaS 금지

리포트에는 쿠키·스토리지·API 응답·브리지 호출이 그대로 들어갈 수 있습니다. 전송 대상은 사내(폐쇄망) 수집 URL로만 두세요. 외부 SaaS로 보내지 마세요. 자세한 운영 지침은 환경별 설정을 보세요.

정보

환경을 진단하고, 모든 패널의 사건을 한 타임라인으로 모으며, UX 실패 신호를 자동으로 표면화하고, "알려진 한계"를 정직하게 고지합니다. 무언가 이상한데 어디를 봐야 할지 모를 때 시작점이 되는 패널입니다.

핵심 기능

• 환경 진단: 디버거 버전·Vue 버전·컴포넌트 introspection 가능 여부·Pinia/Router 연결 여부를 보여줍니다. introspection이 "불가"면 production 빌드라 __VUE_PROD_DEVTOOLS__가 필요하다고 안내합니다.
• 통합 타임라인: network·pinia·router·storage·error·bridge·console 사건을 시간순으로 모읍니다. 종류 멀티 필터와 요약 검색을 제공하고, 행을 탭하면 그 패널의 해당 행으로 점프해 스크롤+강조됩니다(0.17.3 — 네트워크는 사건 정확 매칭, 그 외는 시각 최근접이라 같은 밀리초에 사건이 겹치면 이웃 행이 강조될 수 있음).
• UX 신호: Datadog RUM식 rage click(1초 안에 같은 영역 3회 이상 연타)과 dead click(상호작용 요소를 눌렀는데 약 1초(1000ms) 내 DOM 변화 없음 — 비동기 렌더 거짓양성을 줄이려 0.7→1초로 넓힘)을 자동 감지해 "여기 이상해요"를 먼저 띄웁니다.
• 증상별 시작점: 증상에서 출발해 어느 패널을 볼지 안내합니다.
• 래핑 충돌 고지: 다른 툴(APM/모니터링)이 이미 console·fetch를 감쌌으면 정직하게 고지합니다(호출 위치·타이밍이 어긋날 수 있음).

언제 보나 — 가장 먼저 또는 가장 막막할 때. 통합 타임라인으로 전체 흐름을 훑고 의심 지점에서 해당 패널로 점프합니다.

"알려진 한계" — 정보 패널이 직접 고지하는 것들

• async 스택: 콜백·.then으로 끊긴 비동기 호출은 원래 호출자가 스택에 안 남을 수 있습니다(엔진 한계). 끊긴 스택은 "개발자 프레임 못 찾음"으로 표시됩니다.
• 함수명: minify된 배포 빌드는 소스맵으로 파일:줄은 복원돼도 함수명은 종종 비어 있습니다. 가드 소스도 같은 이유로 코드 텍스트로 보여줍니다.
• 타임트래블: 상태를 임의 과거로 되감지 못합니다(L2 포렌식까지). 재현은 식 평가의 $patch/액션 호출로 직접 합니다.
• 전역 가드: 디버거 attach 이후 등록된 전역 beforeEach만 귀속됩니다. 라우트 권한은 추적상 beforeEnter가 유리합니다.

---

각 패널이 무엇을 잡고 어디까지가 한계인지 이해했다면, 다음은 그 동작을 바꾸는 옵션입니다. 추적 제외·버퍼 상한·브리지 이름·리포트 전송 등은 옵션 레퍼런스에서, 소스맵 복원과 introspection을 켜는 빌드 설정은 환경별 설정에서 다룹니다.