중단점을 사용하여 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

Linux#🎜 🎜 #

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

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

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

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. 웹팩 구성 수정

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