vue 디버깅 툴

디버깅 툴을 개발할 때 너무나도 필요한 빛과 소금!!

크롬에서 디버깅 툴을 extension을 설치하여 사용할 수 있다. 

크롬 설치 url : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

크롬에서 해당 페이지가 vue 기반인지 여부를 보여주는데, 

vue 기반이다 싶으면 vue 마크에 불이 들어오고 아니면 안들어옴 ㅋㅋ

(위 : vue 기반 / 아래 : vue 기반 X)

설치 후 개발자 도구에 들어가면 Vue 탭을 볼 수 있다. 

짜잔.

각 vue component들을 찍어서 볼 수 있고, 

vuex 값도 체크 가능함!

혹시 개발자 도구에 vue 탭이 찍히지 않는다면, 

코드에서 vue 설정 값을 다음과 같이 해본다. 

Vue.config.devtools = true;

그리고 잡히다가 안잡히면 개발자 도구를 껐다가 켜보는 것도 방법~