[Vue JS] Vue Devtools

자, 이번에는 코딩을 도와줄 Vue Devtools를 설치 해볼텐데요. 크롬 확장 프로그램입니다. 물론 크롬에서만 사용 가능하지요. 구글에 vue dev tools를 검색후 아래 확장 프로그램을 다운 받아 줍니다.

설치가 완료되면 아래와 같이 크롬 상단에 확장프로그램 아이콘이 생길탠데요. Vue 코드가 없다면 Vue.js not detected라고 표시되어질 겁니다. 이전 포스트에서 vue를 사용하여 코드를 작성하였음에도 불구하고 Vue.js not detected라고 표시되어지는 이유는 바로 로컬 경로 때문인데요. 

이 문제를 해결하기 위해 파일 URL에도 접근을 허용할수 있게 해주어야 합니다. 방법은 확장프로그램 관리에서 Vue.js devtools를 찾은뒤 파일 URL에 대한 액세스 허용란에 체크 표시를 해주면 됩니다.

위와같이 설정이 끝났다면 이제 Vue devtools가 활성화되며 사용할수 있게 됩니다. 디자인도 깔끔해요. 이 확장프로그램의 또다른 장점은 실시간으로 반응한다는 점인데요. Hello World! 라고 입력되어진 입력란에 다른 값을 넣어주면 실시간으로 Vue.js devtools의 data부분이 변화할 것입니다. 여기까지 따라오신분들은 Hello World!부분을 변경해보세요.