개발공작소
article thumbnail
728x90
반응형

오늘 API를 통해 영화목록을 가져오는 걸 테스트하고 있는데, 데이터는 가져오는데, 디버깅을 하면서

데이터를 확인하고 코드를 짜고 싶었다.. 보통 javascript로 코드를 짜면 개발자도구를 열어서 확인 할 수 있지만..

.vue는 되지 않아서 디버깅하는 방법을 알아보았다..

 

.vue파일 데이터

Vue3에서는 devtool beta를 설치해서 사용하라고 한다.. beta버전... 아래 링크로 들어가자

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg/related?hl=en 

 

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버전을 새로 설치했었는데, 그것 때문에

충돌이 났던 것.. 저놈을 끄니 정상작동 되었다.

728x90
반응형
profile

개발공작소

@모찌바라기

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!