[Vue] devtools

간혹 코드짜다보면 props를 분명 전해줬는데 에러나고 멈추고 하는 경우가 있습니다.
그 경우 터미널이나 크롬 개발자도구 console 탭으로 들어가면 대부분의 에러는 해결가능한데
조용하게 에러나는 경우도 많습니다.
예를 들어 라우터 이런 것들은 뭔가 틀려도 에러로 알려주지 않습니다.
그래서 크롬 확장프로그램 중에 Vue-devtools 라고 설치하시면 좀 더 자세히 버그나는 부분을 파악가능합니다.

https://chrome.google.com/webstore/category/extensions 여기 들어가서 Vue.js devtools 라고 찾아서 설치합니다.

(주의) 두개 뜨는데 둘 중 나중에 출시한 확장프로그램으로 설치하시길 바랍니다.
예전에 나온건 Vue 2 만을 위한 확장프로그램입니다.

설치하시면 localhost:8080에서 우리 사이트를 미리볼 때
개발자도구에 Vue라는 메뉴가 생깁니다.

▲ 누르면 신세계가 펼쳐집니다.
왼쪽은 무슨 컴포넌트 안에 무슨 컴포넌트가 있는지 DOM 트리처럼 구조화해서 보여주고
오른쪽은 컴포넌트를 택했을 때 거기 안에 들어있는 data, vuex state, props 목록을 쭉 보여줍니다.
그래서 state가 잘 변하고 있는지 확인하고 싶으면 여기서 확인하면 되는 겁니다.
props도 잘 보냈는지 확인해볼 수 있고요.

▲ 매우 신기한 버튼들도 제공하는데
과녁버튼 누르고 브라우저 내에 원하는 요소를 찍으면 그 컴포넌트를 검사해줍니다.
<> 버튼 누르면 그 컴포넌트에 해당하는 요소를 element 탭에서 보여주고
네모난 버튼 누르면 VScode에서 해당 컴포넌트 열어줍니다. 신기함

• 프로젝트에 라우터를 설치하셨으면 현재 route, parameter 이런것도 다 확인할 수 있습니다.
• state 누르면 브라우저에서 수정도 해볼 수 있습니다.
• Timeline 메뉴에선 지금까지 어떤 이벤트가 동작했는지 체크도 가능합니다.

아무튼 신기한 기능이 많아 재밌으니 버튼 이것저것 눌러보시길 바랍니다.
혼자 코드짜다가 의도대로 동작하지 않을 때 자주 활용해봅시다.