Vue에서 DevTools 디버깅 도구를 사용하는 방법

이 글은 주로 Vue DevTools 디버깅 도구의 사용을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분에게 공유하고 참고할 것입니다. 에디터를 따라가서 살펴보겠습니다

현재는 개발을 위해 Vue.js 기술 스택을 주로 사용하고 있습니다. 여기서 문제는 Vue DevTools의 디버깅 도구를 사용하는 것입니다. 디버깅을 위해 Vue DevTools를 사용할 때 종종 사용할 수 없고 Vue가 감지되지 않는다는 메시지가 표시되어 작업 효율성이 즉시 저하됩니다.

설치:

1. github에서 다운로드:

git clone https://github.com/vuejs/vue-devtools

2. vue-devtools 디렉터리에 종속성 패키지를 설치합니다.

cd vue-devtools

cnpm install

올바른 Vue DevTools

자, 여기 있어요. 수정하는 방법.

먼저 공식 웹사이트(https: //github.com/vuejs/vue-devtools)에서 Vue DevTools를 다운로드하세요.

핵심 단계 1. 영구 수정persistent

找到文件vue-devtools/shells/chrome/manifest.json，修改persistent为true。

保存后，编译一下：

关键步骤二.勾选允许访问文件网址

上一步已经把Vue DevTools写好了，接下来是安装这个扩展。

打开Chrome，在地址栏输入chrome://extensions/，直接进入Chrome的扩展。

勾选最上方的开发者模式，再点击“加载已解压的扩展程序…”，路径为：vue-devtools-master/shells/chrome

勾选允许访问文件网址

关键步骤三.加入Vue文件中加入Vue.config.devtools

vue-devtools/shells/chrome/manifest.json 파일을 찾아 영구 수정 >은 참입니다.

저장 후 컴파일하세요:

< img alt="" src="https://img.php.cn/upload/article/000/000/008/b3a3b2f7bf9d0ba16bc88ad960253f36-3.png"/>

주요 단계 2. 를 확인하여 액세스를 허용하세요. 파일 URL

Vue DevTools는 이전 단계에서 작성되었으며 다음 단계는 이 확장 프로그램을 설치하는 것입니다.

Chrome을 열고 주소 표시줄에 chrome://extensions/를 입력하면 Chrome 확장 프로그램을 바로 입력할 수 있습니다.

상단 개발자 모드를 확인한 다음 "압축 해제된 확장 프로그램 로드..."를 클릭하세요. 경로는 vue-devtools-master/shells/chrome < img alt="" src="https://img.php.cn/upload/article/000/000/008/b3a3b2f7bf9d0ba16bc88ad960253f36-4.png"/>

파일 URL 접근 허용< /code 체크 ><a href="http://www.php.cn/js-tutorial-404497.html" target="_blank"></a><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/b3a3b2f7bf9d0ba16bc88ad960253f36-5.png" class="lazy" alt=""/>주요 단계 3 Vue 파일에 추가 < code>Vue.config.devtools

Vue.config.devtools = true; //这步很重要
new Vue({
 el: '#app',
 data: {
  a: 123,
 }
});

완료! Effect

Vue DevTools의 개정된 버전을 다운로드하세요. 다운로드: vueDevTools(모니터링 가능한 개정 버전).zip

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사: 🎜🎜🎜vue에서 axios 보조 캡슐화를 구현하는 방법🎜🎜🎜🎜WeChat 애플릿에서 오디오 구성 요소를 사용하는 방법🎜🎜🎜🎜비디오 구성 요소를 사용하여 WeChat 애플릿에서 비디오를 재생하는 방법🎜🎜🎜 🎜 WeChat 애플릿에서 다운로드 진행률 표시줄을 구현하는 방법🎜🎜🎜🎜JavaScript에서 휴대폰 번호 확인 도구인 PhoneUtils를 사용하는 방법🎜🎜

위 내용은 Vue에서 DevTools 디버깅 도구를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!