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

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

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

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

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

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

이 기능은 무엇입니까

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

효과 스크린샷:

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

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

사용 방법

사용 방법은 매우 간단합니다. 프런트엔드 프로젝트에서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 掘金社区에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
Visual Studio vs. vs 코드 : 기능 및 기능 탐색Visual Studio vs. vs 코드 : 기능 및 기능 탐색Apr 15, 2025 am 12:05 AM

VisualStudio는 대규모 프로젝트 및 완전한 용도 요구에 적합한 반면 VSCODE는 가벼운 유연성이 필요한 개발에 적합합니다. 1. VisualStudio는 포괄적 인 IDE 기능을 제공하고 여러 언어 및 고급 프로젝트 관리를 지원합니다. 2.VScode는 가벼운 및 확장 성으로 유명하며 크로스 플랫폼 개발 및 개인화 된 구성에 적합합니다.

Visual Studio vs. vs Code : 프로젝트에 어떤 것이 더 좋습니까?Visual Studio vs. vs Code : 프로젝트에 어떤 것이 더 좋습니까?Apr 14, 2025 am 12:03 AM

VisualStudio는 강력한 디버깅 기능이 필요한 대규모 프로젝트 및 개발 시나리오에 적합한 반면 VSCODE는 유연성과 크로스 플랫폼 개발이 필요한 시나리오에 적합합니다. VisureStudio는 포괄적 인 개발 환경을 제공하고 .NET 개발을 지원하며 디버깅 도구 및 프로젝트 관리 기능을 통합합니다. VSCODE는 가볍고 확장 성으로 유명합니다. 여러 프로그래밍 언어를 지원하고 플러그인 시스템을 통해 기능을 향상 시키며 현대적인 개발 프로세스에 적합합니다.

Visual Studio : 가격 및 라이센스 옵션 탐색Visual Studio : 가격 및 라이센스 옵션 탐색Apr 13, 2025 am 12:03 AM

Community Free Edition은 개인 및 소규모 팀을위한 Community Free Edition, Professional Pait Edition은 전문 개발자 및 중소형 팀을위한 것이며 Enterprise Ultimate Edition은 대기업 및 복잡한 프로젝트를위한 Enterprise입니다.

Visual Studio의 가치 : 이점에 대한 비용의 무게를 측정합니다Visual Studio의 가치 : 이점에 대한 비용의 무게를 측정합니다Apr 12, 2025 am 12:06 AM

VisualStudio는 .NET 개발에서 강력하고 포괄적이기 때문에 매우 가치가 있습니다. 높은 비용 및 자원 소비에도 불구하고 효율성 개선 및 개발 경험이 중요합니다. 커뮤니티는 개별 개발자와 소규모 팀에 이상적입니다. 대기업은 전문 또는 기업에 적합합니다.

Visual Studio의 가용성 : 어떤 판이 무료입니까?Visual Studio의 가용성 : 어떤 판이 무료입니까?Apr 10, 2025 am 09:44 AM

VisualStudio의 무료 버전에는 VisualStudiocommunity 및 VisualStudioCode가 포함됩니다. 1. VisualStudiocommunity는 개별 개발자, 오픈 소스 프로젝트 및 소규모 팀에 적합합니다. 강력하고 개별 프로젝트 및 학습 프로그래밍에 적합합니다. 2. VisualStudioCode는 여러 프로그래밍 언어 및 확장을 지원하는 가벼운 코드 편집기입니다. 빠른 시작 속도와 리소스 사용량이 낮으므로 유연성과 확장 성이 필요한 개발자에게 적합합니다.

Windows 8 용 Visual Studio를 설치하는 방법은 무엇입니까?Windows 8 용 Visual Studio를 설치하는 방법은 무엇입니까?Apr 09, 2025 am 12:19 AM

Windows 8에 VisualStudio를 설치하는 단계는 다음과 같습니다. 1. 공식 Microsoft 웹 사이트에서 VisualStudioCommunity2019 설치 패키지 다운로드. 2. 설치 프로그램을 실행하고 필요한 구성 요소를 선택하십시오. 3. 설치가 완료된 후에 사용할 수 있습니다. Windows 8 호환 구성 요소를 선택하고 충분한 디스크 공간과 관리자 권한이 있는지 확인하십시오.

내 컴퓨터가 코드를 실행할 수 있습니까?내 컴퓨터가 코드를 실행할 수 있습니까?Apr 08, 2025 am 12:16 AM

VSCODE는 기본 시스템 요구 사항이 충족되는 한 대부분의 최신 컴퓨터에서 실행할 수 있습니다. 1. 운영 체제 : Windows 7 이상, MacOS 10.9 이상, Linux; 2. 프로세서 : 1.6GHz 이상; 3. 메모리 : 최소 2GB RAM (4GB 이상 권장); 4. 저장 공간 : 최소 200MB의 가용 공간. 설정을 최적화하고 확장 된 사용량을 줄이면 저조제 컴퓨터에서 원활한 사용자 경험을 얻을 수 있습니다.

Windows 8과 프로그램을 호환하려면 어떻게해야합니까?Windows 8과 프로그램을 호환하려면 어떻게해야합니까?Apr 07, 2025 am 12:09 AM

Windows 8에서 프로그램을 원활하게 실행하려면 다음 단계가 필요합니다. 1. 호환성 모드 사용 코드를 통해이 모드를 감지하고 활성화하십시오. 2. API 호출을 조정하고 Windows 버전에 따라 적절한 API를 선택하십시오. 3. 성능 최적화를 수행하고 호환성 모드 사용을 피하고 API 호출을 최적화하고 일반 컨트롤을 사용하십시오.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구