Vue Devtools

이 문서에서는 VueJS에서 제공하는 디버깅 도구인 Devtools를 사용하는 방법에 대해서 다룬다.

Vue Devtools는 크롬(Chrome) 브라우저에서만 사용 가능하다.

또한 Vue2와 Vue3를 지원하는 개발자도구가 각각 다르므로 설치 시 주의해야 한다.

크롬 브라우저에서 다음 주소에 접속해 설치를 진행한다.

VueJS가 Production mode가 아니라 개발 모드로 불러와져 있는 경우 브라우저에 VueJS 로고가 표시된다.

그리고 개발자 도구를 열면 Vue라는 메뉴가 표시된다. 만약 표시되지 않을 경우에는 개발자 도구를 닫았다가 다시 열면 표시된다.

Vue 메뉴에서는 화면에 표시되지 않는 Vue application 내부 정보들이 표시되며, 이를 수정하거나 추가, 제거하여 변화를 확인해볼 수 있다. 이는 추가적인 출력을 하지 않고도 개발을 효율적으로 진행할 수 있는 좋은 아이디어이다.

Last updated 2 years ago