Vue 디버거

다크 모드

설치 ​

@platform/vue-debugger는 호스트 앱에 npm 패키지 하나로 들어갑니다. 사내 npm 레지스트리에서 받든, 레지스트리 없이 타르볼(.tgz) 파일 하나로 받든 절차는 거의 같습니다. 런타임 의존성이 0개이고 vue는 호스트의 것을 그대로 쓰기 때문에, 설치 단계에서 따로 챙겨야 할 하위 패키지가 없습니다.

이 페이지는 패키지를 내려받아 의존성에 추가하는 것까지만 다룹니다. 받은 패키지를 앱에 실제로 연결하는 방법은 연동을, 그 전에 환경이 맞는지 확인하려면 사전 요구사항을 보세요.

설치 방식 한눈에 ​

배포 방식은 세 가지이고, 소비자 입장에서 권장 순서는 다음과 같습니다. 자세한 빌드/배포 절차(유지보수자용)는 패키지 빌드와 배포에 있습니다.

방식언제 쓰나명령
사내 npm 레지스트리사내에 @platform 스코프 레지스트리가 있을 때(권장)npm install -D @platform/vue-debugger
타르볼(.tgz)레지스트리가 없거나 폐쇄망일 때npm install -D ./platform-vue-debugger-0.17.4.tgz
git 의존성위 둘이 모두 불가할 때(대안)package.json에 git+https://…#v0.17.4

항상 -D(devDependency)로 설치하세요

이 디버거는 개발/검증 환경 전용 도구입니다. 진짜 프로덕션 빌드에는 코드가 한 줄도 들어가지 않으므로(분기가 정적으로 false가 되면 동적 import()가 dead-code로 통째 제거됩니다), 런타임 의존성이 아니라 개발 의존성입니다. 자세한 동작 원리는 환경별 설정을 보세요.

이 패키지는 ESM 전용입니다 — 동적 import()로 소비하며 require()로는 불러올 수 없습니다. 연동 예시가 동적 import()를 쓰는 것은 이 제약과도 맞닿아 있습니다.

설치하기 ​

세 가지 방식 모두 결과는 동일합니다. 환경에 맞는 탭을 고르세요.

bash
# .npmrc에 @platform 스코프가 사내 레지스트리로 매핑돼 있어야 합니다
#   @platform:registry=https://npm.our-company.example
npm install -D @platform/vue-debugger
bash
# 반입한 .tgz 파일을 로컬 경로로 직접 설치 — 레지스트리 불필요
npm install -D ./platform-vue-debugger-0.17.4.tgz
json
// package.json — 소비 프로젝트
{
  "devDependencies": {
    "@platform/vue-debugger": "git+https://git.our-company.example/platform/vue-debugger.git#v0.17.4"
  }
}

git 의존성은 빌드가 따로 필요합니다

git 방식은 소비측에서 패키지를 직접 빌드해야 동작합니다(레포에 dist를 커밋해 두었거나 prepare 스크립트로 빌드하는 경우에만 바로 설치됩니다). 가능하면 사내 레지스트리(A) 또는 타르볼(B) 방식을 권장합니다.

설치가 끝나면 package.json의 devDependencies에 다음과 같이 잡힙니다.

json
{
  "devDependencies": {
    "@platform/vue-debugger": "^0.17.4"
  }
}

vue는 중복 설치되지 않습니다 ​

설치할 때 vue가 함께 내려오지 않을까 걱정하지 않아도 됩니다. vue는 이 패키지의 **peerDependency(^3.4.0)**라서, 디버거는 호스트 앱이 이미 가진 vue를 그대로 사용합니다. 별도 vue를 끌어오거나 중복 설치하지 않습니다.

왜 peerDependency인가

디버거가 vue를 직접 dependencies로 가지면, 소비 앱의 vue와 디버거의 vue가 서로 다른 인스턴스가 되어 반응형이 깨질 수 있습니다. peerDependency로 두면 항상 호스트의 단일 vue 인스턴스를 공유합니다. 사내 표준인 vue 3.5.x는 ^3.4.0 범위에 포함되므로 그대로 충족됩니다.

설치 후 실제로 vue가 추가로 받아지지 않았는지 확인하려면, vue가 먼저 설치된 프로젝트에서 디버거를 설치했을 때 추가 패키지 fetch가 0건이어야 합니다.

폐쇄망(air-gap)에는 .tgz 하나면 끝 ​

레지스트리에 접근할 수 없는 사내 폐쇄망이라면, 타르볼 파일 하나만 반입하면 됩니다. 하위 의존성 .tgz를 따로 챙길 필요가 없습니다.

그 이유는 이 패키지의 두 가지 설계 원칙 때문입니다.

  • 런타임 의존성이 0개입니다. 스택 원본 복원에 쓰는 source-map-js는 빌드 시 dist/index.js에 인라인 번들되어, 소비자는 받지 않습니다.
  • vue는 peerDependency라 따로 다운로드하지 않고 소비 앱의 vue를 그대로 씁니다.

반입 전, 타르볼의 런타임 dependencies가 비어 있는지 다음 명령으로 확인할 수 있습니다.

bash
# tgz의 런타임 dependencies가 비어 있어야 한다
tar -xzO -f platform-vue-debugger-0.17.4.tgz package/package.json \
  | node -e "let s='';process.stdin.on('data',d=>s+=d).on('end',()=>{const p=JSON.parse(s);console.log('dependencies:',p.dependencies||'(없음)');console.log('peer:',p.peerDependencies)})"
# → dependencies: (없음)   peer: { vue: '^3.4.0' }

폐쇄망 소비 프로젝트에서는 네트워크 없이 로컬 파일로 설치합니다.

bash
npm install -D ./platform-vue-debugger-0.17.4.tgz --offline
#   소비 앱에 이미 vue(3.5.x)가 있으므로 추가로 받는 패키지는 없음
폐쇄망 절차의 전체 단계와 검증

인터넷이 되는 곳에서 빌드·패킹한 뒤 .tgz 하나를 반입하고, 폐쇄망에서 --offline로 설치하는 전체 절차와 확인 방법은 폐쇄망 반입에 정리돼 있습니다. 향후 런타임 의존성이 추가될 경우의 대응(사내 미러·오프라인 캐시)도 그곳에서 다룹니다.

타르볼은 유지보수자가 만듭니다

platform-vue-debugger-x.y.z.tgz는 패키지 유지보수자가 npm run build 후 npm pack으로 생성합니다. 타르볼을 직접 만들어 배포하는 절차는 패키지 빌드와 배포를, 버전 표기 규칙은 버전 정책을 보세요.

다음 단계 ​

설치가 끝났으면 앱 부트스트랩에 디버거를 연결할 차례입니다.

개발/검증 환경 전용 인페이지 Vue 디버거 · 진짜 프로덕션엔 코드가 들어가지 않습니다

@platform/vue-debugger · UNLICENSED (사내 전용)