[이슈 관리] 브라우저 개발자도구(DevTools)에서 Vue devTools 비활성화 문제

Vue로 개발할 때 크롬이나 파이어폭스에서 확장프로그램을 설치하면 Vue 개발자도구를 이용할 수 있다.

 

Vue로 개발된 페이지에 들어가면 Vue.js is detected on this page. Open DevTools and look for the Vue panel. 라고 Vue.js 사용이 감지되었다고 나오지만 브라우저 개발자도구에선 Vue 개발자도구 탭이 활성화 되지 않는 문제가 생겼다.

 

cdn을 이용해 그냥 스크립트에 넣어서 사용하면 발생하지 않는다는 것 같은데

개발할 때 npm으로 설치해서 사용하기 때문에... ㅠㅠ

 

이럴 경우 아래와 같이 조치하면 된다.

 

1. 브라우저 개발자 도구에서 settings으로 진입
2. Apperance 메뉴의 theme를 현재 설정된 테마와 다른 것으로 변경해준다.
3. 그러면 개발자도구가 새로고침 될 텐데 Vue 개발자도구 탭이 활성화 된 것을 알 수 있다.
4. 다시 브라우저 개발자 도구의 settings에서 원래 했던 theme로 변경
5. 계속 Vue 개발자도구 탭이 활성화 되어있는지 확인

 

문제는 일시적인 해결방법이란 것이다. 페이지를 새로고침하거나 새로 켰을 때 다시 문제가 발생하기 때문...

왜 안고쳐줄까 ㅠㅠ

 

[참고]
https://github.com/vuejs/vue-devtools/issues/1209

Vue.js is detected but the Vue Panel is not showing · Issue #1209 · vuejs/vue-devtools