Visual Studio Code 중단점 디버깅 Vue 분석

많은 사람들이 크롬의 디버깅 창에서 Vue 코드를 디버깅하거나 console을 직접 사용합니다.log에서 변수 값을 관찰하는 것은 매우 고통스러운 일이다. 최소한 3개의 창을 동시에 열어야 한다.개인적으로는 인터럽트 디버깅에 더욱 익숙하다.이 글은 VS Code 인터럽트 디버깅 코드를 직접 VS Code 인터럽트 디버깅할 수 있도록 Visual Studio Code와 Chrome를 설정하는 방법을 소개하고, VS Code 디버깅 창에서 Chrome에서 console와 같은 값을 볼 수 있습니다.
Chrome 원격 디버그 포트 설정
먼저 VS 코드에서 attach에서 Chrome로 이동하려면 원격 디버그가 켜진 상태에서 Chrome을 시작해야 합니다.
Windows

크롬의 바로 가기 아이콘을 마우스 오른쪽 버튼으로 클릭하고 속성 선택

목표란에 마지막으로 --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를 입력하고 플러그인을 설치한 다음 입력하고 설치가 완료되면 reload를 클릭하여 VS Code를 다시 시작합니다
Visual Studio Code 구성 추가

Visual Studio Code 왼쪽 사이드바에 있는 디버깅 버튼을 클릭하고 팝업 디버깅 설정 창에서 작은 톱니바퀴 설정을 클릭한 다음 크롬을 선택하면 VS Code는 작업공간 루트 디렉터리에 생성됩니다.vscode 디렉터리에 랜치가 있습니다.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}/*"
   }
  }
 ]
}

웹 패키지의sourcemap 수정
웹 패키지 기반 vue 프로젝트라면 인터럽트가 일치하지 않을 수도 있습니다. 수정이 필요합니다.

루트 디렉터리에 있는 config 디렉터리에 있는 index를 엽니다.js 파일

dev 노드 아래의 devtool 값을'eval-source-map'

으로 변경합니다

dev 노드 아래의 cacheBusting 값을false

로 변경
디버깅 시작하겠습니다.
모든 것이 갖추어져 이제 성과를 검수했다

첫 번째 단계를 통해 원격 디버깅으로 Chrome

을 엽니다.

vue 프로젝트에서 npm run dev를 실행하고 디버깅으로 프로젝트를 시작합니다

VS 코드의 왼쪽 사이드바에 있는 디버깅 버튼을 클릭하고 Attach to Chrome을 선택하고 녹색 시작 버튼을 클릭하면 정상적인 디버깅 컨트롤 바가 나타납니다.

지금 바로 가능합니다.vu 파일의 js 코드에서 인터럽트가 디버깅되었습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Visual Studio Code 중단점 디버깅 Vue 분석

좋은 웹페이지 즐겨찾기