이 글은 Visual Studio Code에서 Vue를 디버깅하는 방법과 경험을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있습니다.
많은 사람들이 Chrome 디버깅 창에서 Vue 코드를 디버깅하거나 console.log를 직접 사용하여 변수 값을 관찰하는 데 익숙합니다. 이는 매우 고통스러운 일이며 동시에 3개 이상의 창을 열어야 합니다. 개인적으로 저는 중단점 디버깅에 더 익숙합니다. 이 문서에서는 VS Code의 중단점에서 직접 코드를 디버깅하고 VS Code의 디버깅 창에서 Chrome의 동일한 콘솔 값을 확인하도록 Visual Studio Code 및 Chrome을 구성하는 방법을 소개합니다.
Chrome 원격 디버깅 포트 설정
먼저 VS Code가 Chrome에 연결할 수 있도록 원격 디버깅을 켠 상태에서 Chrome을 시작해야 합니다.
Windows
Chrome 바로가기 아이콘을 마우스 오른쪽 버튼으로 클릭하고 선택 대상 열에
속성을 추가하고 마지막으로 --remote-debugging-port=9222를 추가합니다. 공백으로 구분해야 합니다
macOS
콘솔을 열고 다음을 실행합니다.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Linux
콘솔을 열고 다음을 실행합니다.
google-chrome --remote-debugging-port=9222
Visual Stuido Code 플러그인 설치
Visual Studio Code의 왼쪽 사이드바에 있는 확장 버튼을 클릭한 다음 검색 상자에 Debugger for Chrome을 입력하고 플러그를 설치합니다. -in을 다시 입력하고 설치가 완료된 후 다시 로드를 클릭하여 VS Code
Visual Studio Code 구성 추가
Visual Studio Code의 왼쪽 사이드바에 있는 디버그 버튼을 클릭하고 팝업에서 설정 톱니바퀴를 클릭하세요. 디버그 구성 창을 열고 크롬을 선택하면 작업 공간 .vscode 디렉터리의 루트 디렉터리에 VS Code가 생성되고 그 안에 lanch.json 파일이 있으며 자동으로 열립니다
다음 구성을 사용하세요 자동으로 생성된 lanch.json 파일의 내용을 덮어쓰려면 파일을 사용하세요.
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceRoot}/src", "url": "http://localhost:8080/#/", "sourceMaps": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }
webpack의 소스맵을 수정하세요
webpack을 기반으로 vue 프로젝트를 패키징하는 경우 중단점 불일치 문제가 있을 수 있으므로 몇 가지 수정이 필요합니다.
다음에서 config 디렉터리를 엽니다. 루트 디렉터리
아래의 index.js 파일 dev 노드 아래의 devtool 값을 'eval-source-map'
dev 노드 아래의 캐시 버스팅 값을 false로 변경
위는 내가 모두를 위해 정리한 내용 네, 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Immutable.js에서 실행 취소 및 다시 실행 기능을 구현하는 방법(자세한 튜토리얼)
iview 선택 드롭다운 상자 옵션이 잘못 정렬되는 문제를 해결하는 방법 구체적인 작업은 다음과 같습니다.
Vue.js를 사용하여 선택 드롭다운 목록을 구현하는 방법, 구체적인 작업은 다음과 같습니다
위 내용은 Visual Studio Code에서 중단점 디버깅 Vue를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!