Vue 런타임 검사: devtools 없이 props와 Pinia

런타임 시 Vue 앱 검사: 프록시 없이 Props, Pinia, 네트워크 요청 확인하기

Vue는 컴포넌트 인스턴스를 전역 런타임에 저장합니다. 스크립트는 document.querySelector를 통해 루트 인스턴스를 찾고, 재귀적으로 컴포넌트 트리를 탐색합니다:

• Props는 component.props로 접근 가능합니다.
• 변경 사항은 즉시 적용되며 반응성 트리거됩니다.
• 중첩된 컴포넌트도 페이지 손상 없이 지원됩니다.

초기 버전은 네트워크 호출과 DOM 상태 사이의 '눈먼 구간'을 제거하고 실시간으로 Props를 읽고 수정할 수 있게 해주었습니다.

Pinia 통합: 전체 스토어 제어

Pinia의 상태는 전역 _pStoresMap 객체에 저장됩니다. 인스펙터는 다음과 같은 기능을 추가합니다:

• store.state에 대한 읽기/쓰기 접근 권한.
• getter와 action 호출 가능.
• 새로 고침 없이 안전하게 개입 가능.

마이크로 프론트엔드 환경에서 특히 유용합니다: 스토어 변경 사항이 즉시 UI에 반영되어 백엔드 모킹 없이 예외 케이스 테스트가 가능합니다.

Pinia 접근 예시:

const piniaStores = window._pStoresMap;
const store = piniaStores.get('counter');
console.log(store.state);

브라우저 확장으로의 진화 및 최적화

콘솔 스크립트는 한계가 있었습니다: 수동 실행 필요, 새로 고침 시 오류 발생. 팝업 확장은 일부 문제를 해결했지만 새로운 문제가 드러났습니다:

• 고정 크기 — 큰 JSON 구조에는 불편함.
• 지속적인 스캔으로 인한 높은 CPU 사용량.
• 기업 정책에 의해 설치 차단.

버전 2.0.0에서는 패널을 페이지 내 iframe에 이동했습니다: 전체 화면 공간 활용, 최소한의 부하. 설치 없이 사용 가능한 북마크릿 모드도 추가 — javascript:(function(){...})() 형태입니다.

런타임 시 내장 네트워크 가로채기

프록시 도구(예: Charles, Fiddler)는 설정 복잡성과 SPA에서의 CORS 문제를 겪습니다. 내장 네트워크 캡처는 fetch와 XMLHttpRequest를 가로챕니다:

• 전송 전 브레이크포인트 설정.
• 페이로드/폼 데이터 수정.
• 응답 모킹 가능.
• Postman으로 내보내기 지원.

fetch 오버라이드와 XMLHttpRequest 프록시를 통해 구현. 외부 인증서 필요 없이 페이지 내에서 바로 작동합니다.

방법 비교표:

| 도구 | 설정 난이도 | CORS 안전 여부 | 런타임 통합 여부 |

|------|-------|-----------|---------------------|

| Charles | 높음 | 아니요 | 없음 |

| Devtools | 없음 | 예 | 개발자 전용 |

| Runtime-inspector | 낮음 | 예 | 완전 지원 |

프로덕션 준비 최적화

자동 스캔은 Vue 서명이 있는 SPA 앱에서만 활성화됩니다 (Vue 또는 Pinia 전역 변수 존재 여부 확인). 필터링을 통해 CPU 사용량을 최소화합니다:

• 500ms마다 디바운스된 재스캔.
• 선택적 DOM 탐색.
• 지연된 getter 평가.

프로덕션 환경에서는 거의 무시할 수 있습니다: 대기 시 5% 미만의 CPU 사용률.

왜 중요한가?

• 개발 빌드 필요 없음: 어떤 환경에서도 Props, Pinia, 네트워크 데이터 접근 가능.
• 북마크릿 모드: 기업 방화벽 회피 가능.
• iframe UI: 복잡한 데이터 구조에 잘 대응.
• 네트워크 모킹: CORS 문제 없이 프록시 대체 가능.
• 중급/상급 개발자에게 적합: 런타임 해킹, 오버라이드 기법, Pinia 내부 구조 이해.

이 도구는 개발자 지원 티켓을 70% 감소시켰으며, 이제 품질 보증 워크플로우에 통합되어 있습니다.

— Editorial Team