Vue 입문하(는 도중에 생긴 문제해결)기, Vue.js Devtools 활성화 문제

 Vue.js로 개발을 진행하려면 필수인 google의 확장프로그램 중 Vue.js Devtools가 있다.

Vue 입문하기 글을 쓰며 나 또한 새롭게 데스크탑에 개발환경을 세팅 중이었는데,

이상하게 아무리해도 vue devtools가 활성화가 되지 않았다.

원래는 아래의 링크로 들어가 확장 프로그램을 다운로드 받고,

Vue.js devtools

프로젝트에서 npm run serve를 하고 나서 개발자 도구를 찾아보면,

vue devtools 활성화 사진

저렇게 Vue 카테고리가 생기고, 각 컴포넌트와 데이터를 볼 수 있어야 한다.

하지만 새로운 데스크탑 환경에서는 확장 프로그램이 활성화되지 않았다.

알아보니 해당 현상은 새로운 vue.js 버전이 생기면서 devtools도 업데이트가 진행되기 때문... 이라고 한다.

내가 해결한 방법은 이렇다.

먼저,

1. 추가한 Vue.js devtools 확장 프로그램을 삭제해준다.
   
   
2. 그리고, 아래의 링크로 들어가 vue.js devtools beta 버전을 설치한다.
3. 해당 프로젝트를 구글에서 실행시켜 개발자 도구에서 Vue 도구를 찾아 클릭한다.

Vue.js devtools

 

이렇게 해주면 구글에서 뷰 컴포넌트의 정보를 볼 수 있다ㅏㅏㅏ

 

혹시나 베타 버전이 아닌 방법으로 해결하여 사용하고 계신분이 계시다면 알려주시면 감사하겠습니당당^^*