>  기사  >  개발 도구  >  중단점을 사용하여 vscode를 디버그하는 방법

중단점을 사용하여 vscode를 디버그하는 방법

王林
王林원래의
2020-02-07 15:23:2616006검색

중단점을 사용하여 vscode를 디버그하는 방법

1. Chrome 원격 디버깅 포트를 엽니다.

먼저 원격 디버깅을 활성화한 상태로 시작해야 합니다. Chrome - VS Code가 Chrome에 연결할 수 있도록 합니다.

Windows

Chrome 바로가기 아이콘을 마우스 오른쪽 버튼으로 클릭하고 대상 열에서 속성을 선택한 다음 마지막으로 --remote-를 추가합니다. 디버깅-포트=9222, 공백으로 구분해야 합니다. --remote-debugging-port=9222,注意要用空格隔开

macOS

打开控制台

执行命令 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222

Linux

打开控制台执行命令 google-chrome --remote-debugging-port=9222

macOS

콘솔 열기

# 🎜 🎜#실행 명령 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222

중단점을 사용하여 vscode를 디버그하는 방법Linux#🎜 🎜 #

콘솔을 열고 google-chrome --remote-debugging-port=9222

2 명령을 실행하세요. Chrome 디버그 플러그인 설치

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

중단점을 사용하여 vscode를 디버그하는 방법

3 디버그 구성 파일을 만듭니다.

Visual의 왼쪽 사이드바를 클릭합니다. Studio Code 디버그 버튼을 클릭하고 팝업 디버깅 구성 창에서 설정 기어를 클릭한 다음 chrome을 선택하면 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}/*"
      }
    }
  ]
}

4. 웹팩 구성 수정

중단점을 사용하여 vscode를 디버그하는 방법

Vue 프로젝트인 경우 webpack 기반에서는 중단점 불일치 문제가 있을 수 있으며 일부 수정이 필요합니다.

(1) 루트 디렉터리

아래 config 디렉터리에서 index.js 파일을 엽니다. ( 2) dev 노드 아래의 devtool 값을 'eval-source-map'

으로 변경합니다. (3) dev 노드 아래의 캐시 버스팅 값을 false

#🎜 🎜 #

5. 디버깅을 켜세요

위 구성이 완료된 후:

(1) 통과 첫 번째 단계 원격 디버깅으로 Chrome 열기

(2) vue 프로젝트에서 npm run dev를 실행하여 디버깅 모드에서 프로젝트 시작 #🎜🎜##🎜🎜# (3) 왼쪽 사이드바 클릭 VS Code 디버그 버튼에서 Chrome에 연결을 선택하고 정상적인 상황에서는 녹색 시작 버튼을 클릭합니다. #🎜🎜##🎜🎜#이제 디버깅을 위해 vue 파일의 js 코드에서 중단점을 지정할 수 있습니다. #🎜🎜##🎜🎜# 추천 관련 기사 및 튜토리얼: #🎜🎜#vscode 튜토리얼#🎜🎜##🎜🎜#

위 내용은 중단점을 사용하여 vscode를 디버그하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.