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

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!