Vue2 Devtool 설치

Vue Devtools는 Vue.js 애플리케이션을 디버깅하고 개발 과정을 더 편리하게 만들기 위해 제공되는 브라우저 확장 프로그램입니다. Vue.js를 사용한 애플리케이션의 상태, 컴포넌트 계층 구조, 반응형 데이터 등을 실시간으로 확인하고 조작할 수 있도록 도와줍니다.

---

주요 기능

1. 컴포넌트 트리 탐색
   • Vue 애플리케이션의 컴포넌트 계층 구조를 시각적으로 탐색할 수 있습니다.
   • 각 컴포넌트의 props, data, computed, methods 등의 상태를 확인하거나 수정할 수 있습니다.
2. 반응형 데이터 실시간 확인
   • 컴포넌트에서 사용하는 상태(예: data, props)와 반응형 데이터를 실시간으로 확인하고, 값을 직접 수정하여 애플리케이션이 즉시 반응하는지 테스트할 수 있습니다.
3. Vuex 상태 관리 디버깅
   • Vuex를 사용하는 경우, 상태를 시각적으로 확인하고 각 상태 변화(mutation, action)를 시간 순서대로 추적할 수 있습니다.
   • 시간 여행 디버깅(time-travel debugging): 상태를 특정 시점으로 되돌리거나 앞으로 진행할 수 있습니다.
4. 이벤트 디버깅
   • 컴포넌트 간의 이벤트 전달과 관련된 이벤트 로그를 확인할 수 있습니다.
   • 특정 이벤트의 발생 및 전달 경로를 추적합니다.
5. 라우터 디버깅
   • Vue Router를 사용하는 경우, 현재 활성화된 경로와 네비게이션 기록을 확인할 수 있습니다.
6. 퍼포먼스 모니터링
   • Vue Devtools에서는 컴포넌트 렌더링 및 업데이트 성능을 시각적으로 확인할 수 있는 성능 탭이 제공됩니다.

---

설치 방법

1. 브라우저 확장 프로그램

• Chrome: Chrome 웹 스토어에서 "Vue Devtools"를 검색하여 설치.
• Firefox: Firefox Add-ons에서 설치.

2. Standalone 앱

• Electron 기반의 독립 실행형 앱으로 Vue Devtools를 사용할 수 있습니다.
  Vue Devtools GitHub Repository에서 설치 방법을 확인하세요.

3. 개발 환경에서 사용

• 브라우저에서 확장이 허용되지 않는 경우(예: 로컬 환경), 다음 명령으로 Devtools를 설치할 수 있습니다:
  bash

  코드 복사

  npm install -g @vue/devtools vue-devtools

---

Vue Devtools의 유용성

• 초보 개발자: Vue의 상태 관리와 반응형 시스템을 시각적으로 이해하기 쉽습니다.
• 숙련된 개발자: 복잡한 애플리케이션 상태와 이벤트 흐름을 디버깅하는 데 큰 도움을 줍니다.
• 성능 최적화: 느린 렌더링 문제를 빠르게 확인하고 해결할 수 있습니다.

---

사용 시 주의사항

• 프로덕션 모드에서는 작동하지 않음: Vue Devtools는 기본적으로 개발 모드에서만 작동합니다.
  프로덕션에서도 Devtools를 사용하려면 Vue 앱을 초기화할 때 아래와 같이 설정해야 합니다:
• javascript
  코드 복사
  Vue.config.devtools = true;
• 브라우저 지원: 최신 버전의 Chrome과 Firefox에서 가장 잘 지원되며, 다른 브라우저에서는 기능이 제한될 수 있습니다.

---

Vue Devtools는 Vue.js 개발자에게 꼭 필요한 도구로, 애플리케이션의 디버깅과 성능 최적화 과정에서 매우 유용합니다. 

 

• Vue dev tool을 설치했지만, vue 탭을 찾아볼 수 없었다.

 

Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work. prepare.js:1 The legacy version that supports both Vue 2 and Vue 3 has been moved to https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp prepare.js:1 Please install and enable only the legacy version for your Vue2 app.

 

확인 해보니 Vue2 프로젝트는 legacy 버전을 설치해야한다고 콘솔에서 메세지가 나타났다.

• Vue Devtool legacy 버전을 설치하니 Vue2 프로젝트의 devtool이 정상적으로 실행할 수 있었다.