[Vue.js] 뷰 개발자 도구(뷰 크롬 플러그인) 설치하기

뷰 개발자 도구 (뷰 크롬 플러그인)

• 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있음
• 크롬, 파이어폭스, 사파리에서 모두 지원 가능

 

Google => vue.js devtools 입력

Chrome 웹 스토어 클릭 하여 chrome에 추가 눌러줍니다.

 

뷰 개발자 도구 사용 방법

윈도우 기준 Chrome에서 F12 눌러주세요. 개발자도구 오픈!

(Mac일 경우, cmd + option + I)

 위에 화살표 모양 클릭하여 Vue 선택 (Vue가 안보일 경우, Chrome 종료 후 재실행)

1. 최상위 컴포넌트

2. 최상위 컴포넌트의 상세내용

3. 뷰엑스 속성 확인

4. 특정 시간 동안에 발생한 이벤트 관찰

5. 새로고침

 

 

 

** 오류 처리 [Download the Vue Devtools extension for a better development experience]

html 파일을 만들어 Vue.js를 실행하였을 경우, 개발자도구에 아래와 같이 로그가 찍힌다.

1. Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools

 => 뷰 크롬 익스텐션을 다운로드하라는 로그

이 같은 로그는 file:// 형태로 접근한 파일과 http://로 접근한 파일에 대해 각기 다른 설정을 적용하기 때문

 

설정 > 도구 더보기 > 확장 프로그램 > Vue.js devtools 세부정보 > 파일 URL에 대한 액세스 허용 클릭

 

 

 

* Do it! Vue.js 입문 책으로 공부하며 작성하는 글로 잘못된 정보가 있을 경우 댓글 달아주시면 감사하겠습니다 : )