vscode로 vue를 디버깅하는 방법-VSCode-php.cn

vscode로 vue를 디버깅하는 방법

藏色散人

풀어 주다： 2019-12-17 10:33:25

원래의

5625명이 탐색했습니다.

vue를 vscode로 디버깅하는 방법은 무엇입니까?

VS Code 중단점 디버깅 사용

Chrome의 디버깅 창에서 Vue 코드를 직접 디버깅하는 것은 많은 불편함을 안겨줍니다. 다행히 Visual Studio Code는 VS Code 중단점에서 직접 디버깅하도록 구성할 수 있는 Chrome용 디버거 플러그인을 제공합니다. 코드를 작성하고 VS Code의 디버깅 창에서 Chrome의 콘솔과 동일한 값을 볼 수 있습니다. 이 기사에서는 구성 프로세스를 소개합니다.

관련 권장 사항: vscode 튜토리얼

1. 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

2. Chrome 디버그 플러그인 설치

Visual Studio Code의 왼쪽 사이드바에 있는 확장 프로그램 버튼을 클릭한 다음 검색창에 Debugger for Chrome을 입력하고 플러그인을 설치한 후 다시 입력합니다. 설치가 완료된 후 다시 시작하려면 다시 로드를 클릭하세요.

vscode로 vue를 디버깅하는 방법

3. 디버그 구성 파일 생성

Visual Studio Code의 왼쪽 사이드바에 있는 디버그 버튼을 클릭하고 팝업 디버그 구성 창에서 설정 톱니바퀴를 클릭한 후 크롬을 선택하면 VS Code가 생성됩니다. 작업 공간 .vscode 디렉터리의 루트 디렉터리에 lanch.json 파일이 있으며 자동으로 열립니다.

자동으로 생성된 lanch.json 파일의 내용을 덮어쓰려면 다음 구성 파일을 사용하세요.

참고: URL의 포트 번호는 WEBPACK에서 구성한 시작 포트 번호와 일치해야 합니다.

{
  // 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}/*"
      }
    }
  ]
}

로그인 후 복사

vscode로 vue를 디버깅하는 방법