1️⃣ 문제 상황 및 필요성
- 에러 발생: 코드 작성 시 터미널이나 크롬 개발자도구의 에러 메시지로 대부분 해결 가능하지만,
props, 이벤트 전달 데이터, 라우터 설정 등은 에러가 발생하지 않아 문제를 파악하기 어려울 수 있음.
- 해결책: 실제 사이트에서 코드들이 제대로 동작하는지 확인하려면 Vue devtools를 사용하자.
2.1 설치 방법
- Vite 기반 Vue 3 프로젝트:
npm create vue@latest로 프로젝트 생성 시 Vue devtools 플러그인이 기본 포함되어 있어 별도 설치가 필요 없음.
- 미리보기 화면:
미리보기 창 하단에 Vue 아이콘이 나타나며, 해당 아이콘을 클릭하면 Vue devtools를 이용할 수 있음.
- 아이콘이 보이지 않을 경우:Chrome 웹스토어 - Vue.js devtools에서 확장 기능을 설치하면 크롬 개발자도구에 Vue 탭이 생성됨.
3.1 Components 탭
- 컴포넌트 구조 미리보기:
- 컴포넌트 내 데이터, props, 이벤트 리스너, 바인딩(@, :) 등 확인 가능.
- props가 제대로 전달되었는지, 혹은 의도한 이벤트가 실행되는지 디버깅할 때 유용.
3.2 Pages & Router 탭
- Pages:
Vue Router 설치 시, 여러 페이지로 구성된 사이트의 각 페이지를 확인하고 디버깅할 수 있음.
- Router:
route guard 등의 이벤트가 정상적으로 동작하는지 검토 가능.
3.3 Timeline 탭
- 입력 이벤트 기록:
마우스나 키보드 입력 기록을 실시간으로 보여줘서, 클릭 이벤트 등 예상치 못한 동작 문제 파악에 도움.
- Component Event 기록:
커스텀 이벤트가 발생한 시점과 함께 전달된 데이터를 확인할 수 있음.
- Performance:
화면 변화 시 소요 시간을 측정하여 사이트 성능 문제를 분석할 수 있음.
3.4 Graph 탭
- 파일 간 import 관계 시각화:
관련 파일끼리의 연관성을 파악하거나, 불필요한 컴포넌트를 찾아내어 정리할 때 유용함.
📌 정리 및 활용 팁
- 에러 확인: 터미널/크롬 개발자도구에서 잡히지 않는 문제들도 Vue devtools의 다양한 탭(Components, Timeline 등)을 통해 쉽게 파악 가능.
- 설치 및 실행: Vite 기반 Vue 3 프로젝트는 기본 포함되어 있으며, 필요 시 Chrome 확장 설치로 Vue 탭 활성화.
- 핵심 기능 요약:
- Components: 컴포넌트 구조와 상태, props, 이벤트 확인.
- Pages/Router: 라우팅 및 페이지 별 디버깅.
- Timeline: 사용자 입력 및 이벤트 발생 시간 기록.
- Graph: 파일 간 의존성 시각화.
