Visual Studio Code에서 중단점 디버깅 Vue를 구현하는 방법-JS 튜토리얼-php.cn

Visual Studio Code에서 중단점 디버깅 Vue를 구현하는 방법

亚连

풀어 주다： 2018-06-04 10:48:55

원래의

2535명이 탐색했습니다.

이 글은 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 프로젝트를 패키징하는 경우 중단점 불일치 문제가 있을 수 있으므로 몇 가지 수정이 필요합니다.