크롬 Vue.js devtools 사용 시 "Vue.js not detected" 오류

크롬 확장프로그램에서 Vue.js devtools(https://chromewebstore.google.com/detail/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko)을 설치했는데 막상 사용하려고 하니 위 이미지와 같이 "Vue.js not detected" 오류가 뜨면서 사용이 불가능했다.

 

구글링 한 결과 확장 프로그램 관리에서 옵션 하나를 변경하니 잘 작동하였다.

 

 

1. Vue.js devtools 우클릭 후 확장 프로그램 관리

 

 

 

2. 하단의 " 파일 URL에 대한 액세스 허용" 허용 체크

 

 

 

3. 새로 고침 후 개발자 도구를 다시 열면 Vue 탭을 확인 할 수 있다.

 

 

단, Vue로 제작된 사이트여야 할 것이고 보안상 devtool을 허용하지 않은 경우도 있다.

Vue 공홈에서 devtool을 켜려고 하면 아래와 같이 확인 할 수 있다.

 

" Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author. "