vscode로 HTML을 디버깅하는 방법

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

디버깅을 위해 Chrome용 디버거를 사용하세요

먼저 해당 플러그인을 다운로드하세요

Ctrl+Shift+x를 눌러 플러그인 스토어를 열고, Chrome을 검색하여 플러그인을 확인하고, 설치->새로고침

을 클릭하세요. 플러그인 구성 방법에는 두 가지가 있습니다. 하나는 로컬 파일을 기반으로 디버깅하는 것이고, 다른 하나는 서버-클라이언트 모드를 기반으로 디버깅하는 것입니다.

로컬 파일 디버깅은 Chrome을 시작하여 로컬 파일을 읽은 다음 파일을 기반으로 페이지를 직접 렌더링합니다.

server-client는 디버깅할 파일을 서비스 컨테이너(예: tomcat)에 로드하고 모든 파일은 양식으로 제공됩니다. 제공됩니다.

Chrome은 서비스의 URL 주소를 기반으로 파일에 액세스한 다음 이를 브라우저에 로드합니다.

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

두 가지 구성 방법이 아래에 소개됩니다

1.1.1 로컬 파일 구성 방법을 기반으로 디버깅

.vscode 폴더에 새 launch.json 파일을 만들고 구성을 추가합니다. 아래와 같이

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome 本地调试",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "file": "${file}"
    }
  ]
}

구성 설명:

${file}은 현재 파일을 여는 것을 의미합니다.

${workspaceRoot}는 vscode가 현재 루트 디렉터리를 로드하고 있음을 의미합니다.

launch는 파일을 로드하기 위해 새 Chrome 프로세스를 시작한다는 것을 의미합니다.

attach 현재 파일은 기존 크롬 프로세스를 로드합니다

디버그 메뉴 바에서 [Chrome 로컬 디버깅 실행] 옵션을 선택하고 [f5] 또는 [fn+f5]를 클릭하면 해당 페이지를 볼 수 있습니다

URL 검색창을 보실 수 있습니다. 위의 주소는 file:///로 시작하는 주소로, 로컬에서 파일을 읽는다는 뜻입니다. 이후에는 모든

html 파일을 이렇게

1.1.2 디버깅할 수 있습니다. 서버 구성 방식에 따른 디버깅

1.1.2.1. 서버 측 시작

서버-클라이언트 방식을 기반으로 당연히 파일은 다음과 같습니다. 먼저 서버 컨테이너에 로드했습니다. 여기서는 tomcat을 사용하지 않고

python을 사용합니다.

bash 터미널에서 cd로 vscode의 루트 디렉터리로 이동합니다(예: 광산은 ~/daily). 다음 명령을 실행합니다.

cd ~/daily

# 현재 디렉터리의 파일이 컨테이너에 로드됩니다. 외부 포트는 8080이고 호스트는 로컬 시스템 IP입니다. 로컬 액세스를 위해 localhost를 사용하세요

python3 -m http.server 8080

1.1.2.2. vscode 구성

다음 구성 정보를 launch.json 파일에 추가하세요.

{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome from http",
"url": "http://localhost:8080/${relativeFile}",
"webRoot": "${workspaceFolder}"
},

${workspaceFolder}는 상대 루트 디렉터리를 나타냅니다.

경로를 선택한 후 [http에서 Chrome 시작]을 선택하고 [f5] 또는 [fn+f5]를 클릭하여 Chrome에서 파일이 로드되었는지 확인합니다. 동시에 검색창의 주소를 보면 이번에는 Chrome이 파일에 액세스하기 위해 http 프로토콜을 사용한다는 것을 알 수 있습니다

1.2 Nodejs를 사용한 디버깅

Nodejs를 사용한 디버깅 구성 방법은 기본적으로 동일합니다. 크롬으로 했는데 종류가 바뀌었는데 구체적으로 다음과 같습니다

{
    "type": "node",
    "request": "launch",
    "name": "Node Launch Program",
    "program": "${workspaceFolder}/${relativeFile}"
},

디버거 메뉴바에서 [Node Launch Program]을 선택하고 [f5]를 누르면 디버깅 정보가 아래 디버그 콘솔에 표시됩니다

스크린샷은 없습니다 가져가세요

nodeJs가 설치되지 않은 경우 데비안 기반 컴퓨터에서 다음 명령을 실행할 수 있습니다.

apt install nodejs npm

일반적으로 apt 설치를 사용하면 버전이 이전 버전으로 바뀔 수 있습니다. 소스 코드 설치, 공식 설치 관리자 또는 ppa 구성을 사용할 수 있습니다.

10.x LTS 버전을 사용하여 ppa를 구성하기로 선택했습니다

$ cat /etc/apt/sources.list.d/nodesource.list 
deb https://deb.nodesource.com/node_10.x sid main
deb-src https://deb.nodesource.com/node_10.x sid main

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