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

亚连
풀어 주다: 2018-06-04 10:48:55
원래의
2506명이 탐색했습니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿