인프런 커뮤니티 질문&답변
작성한 질문수
개발자 툴에서 Vue가 표시되지 않는 현상.
작성
·
14
·
수정됨
0
안녕하세요. 강의를 듣다가 이하처럼
vue개발자 툴을 표시하고 싶은데 잘 안되어서 문의를 드리게 되었습니다.
이하 시도해 본 것.
1.구글 최신버젼 확인
2.구글 확장기능창에서 개발자모드 활성화
Google Chrome확장기능에 vue.js devtools추가(버젼7.7.7)
4.파일URL에 접근을 허가 활성화
5. Vue.js3사용인지 Vue.js2사용중인지 Copilot에게 확인해본결과 index.html의 script부분을 바꿔야 한다는 내용이 나옴.
6. Vue버젼 확인해봤으나 버젼 확인 안됨.
현재까지 강의에서는 아직 터미널 상에서 Vue를 설치하라는 내용이 없었으나 설치를 시도해보는게 좋을까요?
7.node.js다운로드 확인 - 다운로드 완료되어 있음.
그 외에도 시도해보면 좋은게 있으면 알려주시면 감사드립니다.
답변 2
0
네 답변감사드립니다. 한가지 이 강의를 몇년전에 구입을 했는데 Vue js2로 코딩 된게 많은걸로 보여집니다.
콘솔 찍어보니 2.7.16으로 나오네요.
이 뒤로 강의 진행하며 실습함에 있어서 터미널 상에서 Vue2에맞는 프로그램을 설치하는게 맞을까요. 고민이 되네요.
현재 터미널 상에서는 이하와 같이 Vue가 설치 되어 있지 않은걸로 보여집니다.
0
안녕하세요, 인프런 AI 인턴입니다.
김 정훈님, Vue.js DevTools이 제대로 작동하지 않는 문제로 어려움을 겪고 계신 것 같습니다. 이 문제는 여러 이유로 인해 발생할 수 있으며, 최적의 해결 방법을 찾기 위해 몇 가지 추천 안을 드리겠습니다.
Vue.js 버전 확인:
- 현재 사용 중인 Vue.js 라이브러리의 버전을 확인하는 것은 필수입니다. 만약 Vue 3.x를 사용하고 계신다면, CDN 링크를 최신 Vue 3용으로 업데이트해야 합니다. Vue 2.x와 Vue 3.x는 호환되지 않는 부분이 많기 때문입니다.
- 주어진 코드 이미지를 통해 Vue.js의 버전을 확인하고 해당 버전에 맞는 DevTools를 사용해 보세요.
- 현재 사용 중인 Vue.js 라이브러리의 버전을 확인하는 것은 필수입니다. 만약 Vue 3.x를 사용하고 계신다면, CDN 링크를 최신 Vue 3용으로 업데이트해야 합니다. Vue 2.x와 Vue 3.x는 호환되지 않는 부분이 많기 때문입니다.
Vue.js DevTools 확장 프로그램 제거 후 재설치:
- Chrome에서 Vue.js DevTools 확장 프로그램을 제거한 후, 아래 링크를 통해 다시 설치해 보세요.
- Vue.js DevTools (Chrome Web Store)
- Chrome에서 Vue.js DevTools 확장 프로그램을 제거한 후, 아래 링크를 통해 다시 설치해 보세요.
브라우저 캐시 삭제:
- 가끔 브라우저의 캐시가 문제를 일으킬 수 있습니다. 캐시를 삭제한 후 다시 시도해 보세요.
- 가끔 브라우저의 캐시가 문제를 일으킬 수 있습니다. 캐시를 삭제한 후 다시 시도해 보세요.
Vue 앱 로컬 서버 확인:
- Vue.js는 로컬 서버에서 실행할 때 DevTools가 제대로 작동하는 경우가 많습니다.
npm또는yarn을 사용하여 프로젝트를 로컬 서버로 실행해 보세요. 예를 들어,npm run serve를 통해 확인할 수 있습니다.
- Vue.js는 로컬 서버에서 실행할 때 DevTools가 제대로 작동하는 경우가 많습니다.
위의 방법들이 도움이 되길 바랍니다. 만약 여전히 문제가 해결되지 않는다면, 추가적인 정보를 제공해주시거나 다른 개발자 커뮤니티에서 도움을 받으시는 것도 좋은 방법입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.