VueJs 개발 도구 패널이 표시되지 않음

VueJs 개발 도구 패널이 표시되지 않음

응용 프로그램에서 vue dev-tools를 사용하기 시작했는데 Chrome에서 개발자 모드일 때 보이지 않습니다.dev-tools github 페이지나 웹상의 다른 곳에서 여러 가지 솔루션을 시도했지만 잘 되지 않았습니다.아래는 제가 표시하기 위해 시도했던 것입니다.

1. 가능한allow access to file URL’s option크롬 익스텐션으로
2. 추가된Vue.config.debug = true; Vue.config.devtools = true;새 Vue({}) 직전
3. VueJS 파일의 정규화되지 않은 버전을 추가했습니다.
4. 또한 Chrome의 최신 버전인 55.0.2883.87을 사용하고 있습니다.

크롬 확장을 클릭하면 다음과 같은 메시지가 나타납니다.

패널이 실제로 표시되지 않는 것을 제외하고.

이에 대한 해결책을 가진 사람이 있나요?고마워요.

메뉴바에서는 Vue 아이콘을 활성화 할 수 없었지만, Chrome 개발자 툴에서는 Vue 탭을 표시할 수 있었습니다.다음을 시도해 보십시오.

• Chrome 개발자 도구 창을 닫습니다.
• 브라우저를 하드 리프레시
• 개발자 도구 창을 다시 열고 Vue 탭을 찾습니다.

도구 모음의 아이콘은 여전히 Vue를 감지할 수 없음을 나타낼 수 있지만 이 탭은 Chrome 개발자 도구에 표시되어야 합니다.

같은 문제가 있었습니다.cdn "vue.min.js"에서 Miniated vue를 사용하고 있었습니다.그리고 나서 나는 그것을 제거하고 비미니파이드 vue를 사용했다.그런 다음 브라우저를 새로고침하고 콘솔을 다시 열었더니 vue 탭이 있었습니다.

또한 오늘 광고 차단기가 설치되어 있는 경우 Vue Devtools가 제대로 실행되지 않습니다.

저는 로컬 HTML 파일을 실행하고 있었습니다.기본적으로 Chrome은 로컬 파일에서 확장명이 작동하지 않도록 차단합니다.

• 3 도트 메뉴 -> 기타 도구 -> 확장

• Vue 확장자를 찾아 세부 정보를 클릭하고 "파일 URL에 대한 액세스 허용:

스크린샷

• 크롬을 닫았다가 다시 열기

파일 탭을 닫았다가 다시 여는 것이 효과가 있었습니다.

• Google Chrome을 여러 번 다시 시작합니다.

• 최소 파일 사용 안 함

• 새로운 vue 인스턴스화 전에 추가:

  Vue.config.devtools = true;
  

"하드 새로고침"을 몇 번만 수행합니다.Windows의 경우: SHIFT + F5.Mac의 경우: CMD + SHIFT + R.

[ Allow access to file URLs from Vue extensions ]를 유효하게 한 후 Shift + F5 를 사용하여 페이지를 하드 리프레시 합니다.그것은, 나에게는 유효했습니다.

(Firefox 브라우저의 경우) 브라우저에 추가 기능 'Vue.js devtools'가 추가된 경우..Inspect Element를 클릭하기만 하면(또는 F12를 누름) Vue 탭과 Inspector, Console, Network 등이 있습니다.해당 Vue 탭을 클릭하고 디버깅을 즐기십시오.

Vue 3에는 devtools 베타를 사용합니다. Vue 앱이 올바르게 마운트되었는지 항상 확인하십시오.

하드 새로고침을 수행하고 개발 콘솔을 닫은 후 다시 여십시오.

순서 1: 추가vue.js devtools여기서부터의 연장선상에서

순서 2: 추가 후vue.js devtools브라우저를 닫습니다.

순서 3: 브라우저를 열고 html 페이지를 엽니다.

순서 4: 마우스 오른쪽을 클릭하여inspect해 .Vue.

주의: vue.js의 CDN을 추가하지 않은 경우 이 행을 html 파일에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

하드 새로고침, 도와줘요.

devtools 열기 -> 새로고침 버튼 오른쪽 클릭 -> 하드 새로고침

vue dev tools 확장을 사용하기 전에 chrome 개발자 도구를 닫아야 합니다.(크롬 개발 도구가 열려 있는 경우 크롬 개발 도구를 닫았다가 다시 여십시오.)

프로덕션 CDN을 사용하지 않도록 하십시오.VueJS dev 버전을 사용하는 방법밖에 없습니다.

개발 : vue.js

이런 일이 주기적으로 일어나는데, 아무 원인도 없는 것 같아서 상당히 짜증나요.

• Chrome 브라우저 확장으로 이동
• Vue DevTools 확장 제거
• 다시 추가
• 페이지 하드 리프레시

---

크롬 - 버전71.0.3578.98

MacOS 모하비 10.14

VueJS 2.5.21

1. 크롬 앱을 종료하다
2. 개발 서버 재실행
3. 크롬 앱을 다시 열다
4. 오픈 로컬 호스트
5. F12 키를 누릅니다(개발 도구를 열려면).

분명하지만 Vue 패널은 알 수 없는 모드일 때는 사용할 수 없습니다.이 경우 Vue 아이콘도 표시되지 않습니다.

vue3을 사용하는 경우 Vue devtool 확장을 제거하고 베타 버전을 설치합니다.다음 링크에서 크롬용으로 설치할 수 있습니다.https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

@Daryn 답변에서 그는 마녀 vue 아이콘이 있다고 언급했습니다.여기서는 크롬에서 vue 확장을 실행하는 이 부분에 대한 해결책입니다.동시에 OP 문제도 해결합니다.

오른쪽 상단 크롬 모서리에 잠시 동안 플러그인을 설치하는 동안 VUE ICON이 메시지와 함께 표시됩니다(스크린샷은 내 것이 아님).

또한 CRITIAL은 해당 아이콘의 오른쪽 버튼을 클릭하여 (메시지를 닫지 않고) "PIN"(확장 아이콘 바에 고정됨)을 선택하는 것입니다. 그렇지 않으면 해당 아이콘은 다시 표시되지 않습니다(실수).그 후 크롬을 셧다운하고 다시 엽니다.vue를 사용한 페이지에서 이 아이콘은 녹색(클릭할 수 있음)으로 표시되며 일부 페이지 요소(또는 화면 중앙)에서 오른쪽 버튼을 클릭한 후 "Inspect"를 선택하여 확인할 수 있습니다.

설정을 선택하고 기본 설정으로 이동하여 지속성을 찾고 로컬 재정의를 활성화할 수 있습니다. 영어가 능숙하지 않습니다.

잊지 마세요

npm run dev 

(또는 프로젝트와 같은 것)

그리고 첫 번째 답부터 조언을 받아보세요.

언급URL : https://stackoverflow.com/questions/41505150/vuejs-dev-tools-panel-not-showing