VSCODE로 VUE 프로젝트를 디버그하는 방법

vs 코드에서 VUE 프로젝트를 디버그하는 단계 : 프로젝트 실행 : NPM Run Serv 또는 원사 서브 서브 디버거 : F5 또는 "Debug 시작"버튼 선택 "vue : chrome에 첨부"구성 : 브라우저에 첨부 된 구성 : vs 크롬 설정에서 실행되는 프로젝트에 자동으로 첨부 된 Code Breakpoint Debug : F5 또는 "Debug Sect Ste본" "감시"창

대 코드에서 VUE 프로젝트를 디버깅하는 방법

VUE 프로젝트 디버깅은 개발 프로세스의 필수 부분이며 코드의 문제를 식별하고 수정하는 데 도움이됩니다. VSE 코드로 VUE 프로젝트를 디버깅하는 것은 매우 간단합니다.

단계:

1. 프로젝트 실행 : 먼저, VUE 프로젝트를 시작하기 위해 npm run serve 또는 yarn serve 명령 줄에서 실행하십시오.
2. 디버거를 엽니 다 : 대 대 코드에서 F5 누르거나 디버그 도구 모음에서 "디버그 시작"버튼을 클릭하여 디버거를 엽니 다.
3. 디버그 구성 : 디버그 구성 선택 구성 대화 상자에서 "vue : chrome에 첨부"구성을 선택하십시오.
4. 브라우저에 첨부 : 이 시점에서 VS 코드는 이미 크롬에서 실행중인 VUE 프로젝트에 자동으로 첨부됩니다.
5. 중단 점 설정 : 실행이 줄에 도달 할 때 디버깅이 일시 중지되도록 코드에서 중단 점을 설정하십시오.
6. 디버깅 시작 : F5 다시 누르거나 "디버깅 시작"버튼을 클릭하여 디버깅을 시작하십시오.
7. 단계별 디버깅 : VS 코드 디버깅 도구 모음에서 "단계별", "단계별"및 "단계별"버튼을 사용하여 단계별 코드를 실행하십시오.
8. 변수 확인 : 모니터 창을 사용하여 변수의 값과 속성을 확인하십시오.

기타 팁 :

• sourcemap이 package.json에 구성되어 있는지 확인하십시오.
• 대규모 프로젝트의 경우 소스 매핑 기능을 사용하여 디버깅하는 동안 코드를 쉽게 찾을 수 있습니다.
• vue.js devtools와 같은 확장자는 VS 코드의 디버깅 경험을 향상시키는 데 사용될 수 있습니다.

위 내용은 VSCODE로 VUE 프로젝트를 디버그하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!