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

코드에서 JSON을 포맷하는 방법은 다음과 같습니다. 1. 바로 가기 키 사용 (Windows/Linux : Ctrl Shift I; MacOS : CMD Shift I); 2. 메뉴를 살펴보십시오 ( "편집"& gt; "형식 문서"); 3. JSON Formatter Extensions (예 : 더 예쁘다) 설치; 4. 수동으로 형식 (바로 가기 키를 사용하여 블록을 들여 쓰기/추출하거나 교정기 및 세미콜론을 추가); 5. 외부 도구 (예 : Jsonlint 및 Json Formatter)를 사용하십시오.

VSCODE의 컴파일 코드는 5 단계로 나뉩니다. C 확장을 설치하십시오. 프로젝트 폴더에서 "main.cpp"파일을 만듭니다. 컴파일러를 구성 (예 : Mingw); 바로 가기 키 ( "Ctrl Shift B") 또는 "빌드"버튼으로 코드를 컴파일합니다. 바로 가기 키 ( "F5") 또는 "실행"버튼으로 컴파일 된 프로그램을 실행하십시오.

Visual Studio Code를 설치하려면 다음 단계를 따르십시오. 공식 웹 사이트 https://code.visualstudio.com/; 운영 체제에 따라 설치 프로그램을 다운로드하십시오. 설치 프로그램을 실행하십시오. 라이센스 계약을 수락하고 설치 경로를 선택하십시오. 설치가 완료된 후 VSCODE가 자동으로 시작됩니다.

Visual Studio 코드에서 글꼴을 확대하는 방법은 다음과 같습니다. 설정 패널 (CTRL 또는 CMD)을 엽니 다. "글꼴 크기"를 검색하고 조정하십시오. 올바른 크기의 "글꼴 패밀리"를 선택하십시오. 올바른 크기를 제공하는 테마를 설치하거나 선택하십시오. 키보드 바로 가기 (CTRL 또는 CMD)를 사용하여 글꼴을 확대하십시오.

VSCODE를 통해 원격 서버에 연결하는 방법은 무엇입니까? 원격 설치 -SSH 확장 구성 SSH vscode에서 연결을 만듭니다. 연결 정보 입력 정보 : 호스트, 사용자 이름, 포트, SSH 키 원격 탐색기에서 저장된 연결을 두 번 클릭하십시오.

VSCODE에서 VUE 프로젝트를 실행하는 단계가 필요합니다. 1. VUE CLI를 설치하십시오. 2. VUE 프로젝트를 만듭니다. 3. 프로젝트 디렉토리로 전환하십시오. 4. 프로젝트 종속성을 설치하십시오. 5. 개발 서버를 실행하십시오. 6. 브라우저를 열면 http : // localhost : 8080을 방문하십시오.

vscode에서 파일을 비교하는 방법 : 1. 두 파일을 엽니 다. 2. 차이점보기 (보기 메뉴), 3. 차이점보기 (녹색 추가, 빨간색 삭제, 자주색 수정), 4. 화살표 키를 사용하여 탐색, 5. 변경 사항을 수락하거나 거부하십시오. 추가 기능에는 변경 사항 병합, 변경 사항 복사, 세부 사항보기 및 편집 차이가 포함됩니다.

VSCODE에서 JS 코드를 실행하는 방법은 무엇입니까? .js 파일을 작성하고 코드를 작성합니다. Node.js 및 NPM을 설치하십시오. Chrome 용 디버거를 설치하십시오. 디버그 콘솔을 엽니 다. 크롬 선택; 디버그 구성 추가; 디버그 스크립트를 설정하십시오. 코드 실행; 디버그 코드 (선택 사항).


핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

드림위버 CS6
시각적 웹 개발 도구

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
