집 > 기사 > 웹 프론트엔드 > Visual Studio Code의 중단점을 사용하여 Vue를 디버깅하는 방법 공유

Visual Studio Code의 중단점을 사용하여 Vue를 디버깅하는 방법 공유

小云云원래의: 2018-05-10 15:31:053437검색

많은 사람들이 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을 입력하고 플러그인을 설치하고 다시 입력한 후 클릭 설치가 완료된 후 다시 로드하고 VS Code를 다시 시작하세요

Visual Studio Code 구성 추가

Visual Studio Code의 왼쪽 사이드바에 있는 디버그 버튼을 클릭하고 팝업 디버그 구성 창에서 설정 핀니언을 클릭한 다음 Chrome을 선택하면 VS Code는 작업 공간의 루트 디렉터리에 .vscode 디렉터리를 생성합니다. 그러면 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 프로젝트를 패키징하는 경우 중단점 불일치 문제가 있을 수 있으므로 몇 가지 수정이 필요합니다.

다음에서 구성을 엽니다. 디렉토리의 루트 디렉토리 index.js 파일
개발 노드 아래의 devtool 값을 'eval-source-map'으로 변경
개발 노드 아래의 캐시 버스팅 값을 false

로 변경하세요. 디버깅 시작

모든 것이 준비되었습니다. 이제 결과가 승인됩니다

첫 번째 단계에서 원격 디버깅으로 Chrome을 엽니다.
vue 프로젝트에서 npm run dev를 실행하여 디버깅 모드에서 프로젝트를 시작합니다
VS Code의 왼쪽 사이드바에 있는 디버그 버튼을 클릭하고 Chrome에 연결을 선택한 다음 녹색 시작 버튼을 클릭하면 일반적인 상황에서 디버그 제어 막대가 나타납니다.
이제 .vue 파일의 js 코드에서 중단점을 디버깅할 수 있습니다.

Visual Studio Code의 중단점을 사용하여 Vue를 디버깅하는 방법 공유

관련 기사