VSCode는 브라우저를 원활하게 디버깅할 수 있으며 사용법과 원리 분석을 살펴보겠습니다.

VSCodeEpic 업데이트를 통해 브라우저를 원활하게 디버깅할 수 있습니다. 다음 기사에서는 이 기능, 사용 방법 및 해당 원리에 대한 간략한 분석을 안내합니다.

2021-07-16 Microsoft는 이 기능을 특별히 소개하는 블로그를 게시했는데, VSCODE는 정말 대단합니다!

이전에 vscode에서 Chrome이나 Edge를 디버그하려면 Chrome 디버거 또는 Microsoft Edge 디버거 확장, 두 개의 vscode 확장을 사용해야 합니다.

그리고 더 중요한 것은 가장 기본적인 콘솔 기능만 제공할 수 있다는 것입니다. 네트워크 및 요소와 같은 다른 기능을 보려면 브라우저로 이동해야 합니다. [추천 학습: "vscode 튜토리얼"]

이 기능은 무엇입니까

업데이트 후에는 vscode에서 크롬이나 엣지에서 바로 open link가 가능하고, 요소 보기, 네트워크 등 거의 모든 것을 완성할 수 있습니다. vscode에서 직접 디버깅에 필요한 모든 공통 기능 .

효과 스크린샷:

(edge ​​devtools)

(디버그 콘솔)

사용 방법

사용 방법은 매우 간단합니다. 프런트엔드 프로젝트에서 F5를 누르면 디버깅이 실행되고 간단한 구성을 수행합니다. 다음은 모든 사람을 위한 lauch.json 구성입니다. 이를 사용하면 디버깅 브라우저를 직접 열 수 있습니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

누구나 각자의 상황에 맞게 url, webRoot 등의 매개변수를 수정해야 합니다.

원리

이 원리는 실제로 크롬 디버거 확장 원리와 유사합니다. 또한 websocket 링크를 설정하기 위해 Chrome의 devtool 프로토콜을 기반으로 합니다. vscode가 일부 런타임 정보를 동적으로 얻을 수 있도록 서식이 지정된 json 데이터를 전송하여 상호 작용하세요. 예를 들어 브라우저 네트워크 스레드에서 보낸 요청과 DOM 노드 정보가 있습니다.

위에서 언급한 네트워크 요청과 같은 chrome devtool 프로토콜을 통해 많은 정보를 얻을 수 있습니다.

websocket에 의해 설정된 양방향 링크이므로 VSCODE에서 DOM을 변경하고 브라우저 수정을 트리거하는 것이 쉽습니다. VSCODE(웹소켓 클라이언트)에서 작동한 다음 웹소켓을 통해 JSON 데이터 조각을 브라우저(웹소켓 서버)로 보내기만 하면 됩니다. 브라우저는 수신된 JSON 데이터를 기반으로 일부 작업을 수행합니다. 효과는 브라우저에서 직접 사용자가 수동으로 작업하는 것과 다르지 않습니다.

NodeJS 클라이언트뿐만 아니라 Python, Java, PHP 및 기타 클라이언트까지 chrome devtool 프로토콜용 클라이언트가 많다는 점은 주목할 가치가 있습니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 소개를 방문하세요! !

위 내용은 VSCode는 브라우저를 원활하게 디버깅할 수 있으며 사용법과 원리 분석을 살펴보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!