[Vue] Vue3에서 디버깅을 해보자. ( feat. devtool beta )
오늘 API를 통해 영화목록을 가져오는 걸 테스트하고 있는데, 데이터는 가져오는데, 디버깅을 하면서
데이터를 확인하고 코드를 짜고 싶었다.. 보통 javascript로 코드를 짜면 개발자도구를 열어서 확인 할 수 있지만..
.vue는 되지 않아서 디버깅하는 방법을 알아보았다..
Vue3에서는 devtool beta를 설치해서 사용하라고 한다.. beta버전... 아래 링크로 들어가자
Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
chrome.google.com
아 그리고 한가지 더, Vue3 디버깅 요녀석은 아직 크롬에서만 지원한다는 것 같으니 참고하길 바란다.
그럼 확장 프로그램으로 추가하면 아래와 같이 디버깅이 제대로 작동한다.
============================================================================
그러고 보니, 처음 실행했을 때 아래와 같은 에러가 떴었는데
 |
VM72164:1 Another version of Vue Devtools seems to be installed. Please enable only one version at a time.
디버깅 확장프로그램 다른 버전이 설치되어 있대서 확장프로그램에 가보니..
이렇게 2개 설치되어 있었다.. 저 우측하단에 있는 녀석은 Vue3에서 제대로 작동이 안되던 녀석.. 아마 Vue2에서는
작동되지 않을까 싶다. 근데 나는 Vue3이라 디버깅이 안되서 beta버전을 새로 설치했었는데, 그것 때문에
충돌이 났던 것.. 저놈을 끄니 정상작동 되었다.