Vue.js 개발 도구 V5.1.1

Vue.js devtools의 crx 파일을 다운로드한 후 Chrome의 확장 프로그램 페이지(chrome://extensions/ 또는 Chrome 메뉴 아이콘 > 추가 도구 > 확장 프로그램 찾기 누르기)를 연 다음 crx 파일을 확장 프로그램 페이지에 끌어다 놓아 설치하세요. ;
4. "확장 프로그램 추가"를 클릭하여 설치를 완료하세요.

5. Vue.js devtool 플러그인은 설치 후 사용할 수 없으며 "vue.js가 감지되지 않음" 메시지가 나타납니다. 이때 다음 방법을 사용할 수 있습니다.

먼저 Vue.js devtool 플러그인의 설치 디렉터리를 찾아야 합니다. (정말 플러그인 설치 위치를 찾을 수 없다면 로컬 컴퓨터에서 플러그인 ID를 검색해 보세요: nhdogjmejiglipccpnnnanhbledajbpd.) 크롬 플러그인의 설치 위치는 운영체제마다 다릅니다. 예를 들어, win8 시스템에서 Chrome 플러그인 설치 위치: C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultExtensionsnhdogjmejiglipccpnnnanhbledajbpd
Second, Vue.js devtool 플러그인의 설치 디렉터리를 찾은 후 mainifest.json 파일(핵심)을 엽니다. .

mainfest.json의 코드 persist: false를 persist: true로 변경합니다. 아래 그림과 같이

일반적으로 위 위치의 코드가 수정됩니다. vue 프로젝트를 연 후 콘솔에서 vue를 선택하면 정상적으로 사용할 수 있습니다.

셋째, 위의 방법으로 조정한 후에도 여전히 사용할 수 없다면 webpack.config.js의 코드를 아래와 같이 조정하면 됩니다.

마지막으로 vue 프로젝트를 다시 시작해야 합니다. 사용할 준비가.

2. 소스코드 설치 방법

2 다운로드 후 vue-devtools-master 프로젝트에 들어가서 cnpm install을 실행하고 종속성을 다운로드한 다음 npm run build를 실행하여 소스 프로그램을 컴파일합니다.

3. 컴파일이 완료된 후 디렉터리 구조는 다음과 같습니다.

shells-chrome 디렉터리의 mainifest.json에서 지속성을 true로 수정합니다.

Chrome 설정 ---> 확장 프로그램을 실행하고 개발자 모드를 확인하세요.

그런 다음 방금 컴파일한 프로젝트의 쉘 디렉터리에 있는 전체 chrome 폴더를 현재 브라우저로 직접 드래그하고 활성화를 선택하세요. 브라우저에 플러그인을 설치합니다.

5 기존 vue 프로젝트를 열고 프로젝트를 실행한 다음 브라우저에서--->설정--->추가 도구--->개발자 도구에서 디버깅 모드로 들어갑니다.
vue.js가 감지되지 않으면 webpack.config.js의 코드를 조정할 수 있습니다.


마지막으로 vue 프로젝트를 다시 시작하면 사용할 준비가 됩니다.

요약: Vue.js devtool 플러그인을 설치한 후 "vue.js가 감지되지 않음" 문제가 나타납니다. 먼저 확장 프로그램에서 개발자 모드를 선택하고 플러그인 설치 디렉터리를 엽니다. mainifest.json에서 persistant를 true로 설정하고, 그래도 작동하지 않으면 webpack.config.js의 코드를 조정하고 마지막으로 vue 프로젝트를 다시 시작하여 사용하세요.