VS Code에서 브라우저 디버깅
Visual Studio Code에는 Edge 및 Chrome용 빌트인 디버거가 포함되어 있습니다. 시작하는 방법에는 몇 가지가 있습니다.
- URL을 디버깅하려면 링크 열기 명령을 사용하세요.
- JavaScript 디버그 터미널에서 링크를 클릭합니다.
- 애플리케이션과 함께 브라우저를 시작하려면 시작 구성을 사용하세요.
또한 React, Angular, Vue 및 기타 디버깅 레시피에 대한 더 자세한 안내서도 있습니다.
링크 열기 명령
웹페이지를 디버깅하는 가장 간단한 방법은 명령 팔레트(Windows, Linux의 Ctrl+Shift+P / macOS의 ⇧⌘P)에서 찾을 수 있는 디버그: 링크 열기 명령을 사용하는 것입니다. 이 명령을 실행하면 열려는 URL을 묻는 메시지가 표시되며 디버거가 연결됩니다.
기본 브라우저가 Edge인 경우 VS Code는 해당 브라우저를 사용하여 페이지를 엽니다. 그렇지 않은 경우 시스템에서 Chrome 설치를 찾으려고 시도합니다.
시작 구성
시작 구성은 VS Code에서 디버깅을 설정하는 전통적인 방법이며 복잡한 애플리케이션 실행에 가장 많은 유연성을 제공합니다.
이 섹션에서는 더 고급 디버깅 시나리오에 대한 구성 및 기능에 대해 자세히 살펴보겠습니다. Node.js의 외부 코드 건너뛰기에 대한 지침은 브라우저 기반 디버깅에도 적용됩니다.
참고: VS Code를 처음 사용하는 경우 디버깅 주제에서 일반적인 디버깅 기능 및
launch.json구성 파일 생성을 배울 수 있습니다.
브라우저 시작
대부분의 경우 웹페이지나 파일을 디버깅하기 위해 브라우저의 새 인스턴스를 시작하려고 합니다. 이렇게 하려면 다음과 같이 .vscode/launch.json이라는 파일을 만들 수 있습니다.
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch my cool app",
"url": "https://:8000"
}
]
}
F5를 누르거나 실행 및 디버그 보기에서 시작 버튼을 클릭하면 디버그 모드에서 https://:8000이 열립니다. Edge 대신 Chrome을 사용하려면 msedge를 chrome으로 바꾸세요.
서버를 실행하지 않고 단일 파일을 디버깅할 수도 있습니다. 예를 들면 다음과 같습니다.
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch hello.html",
"file": "${workspaceFolder}/hello.html"
}
]
}
브라우저 연결
실행 중인 브라우저에 연결하려면 특수 디버그 모드로 시작해야 합니다. 다음 명령을 사용하여 Edge 또는 Chrome 이진 파일의 경로로 edge.exe를 바꿔서 수행할 수 있습니다.
edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
--remote-debugging-port를 설정하면 브라우저가 해당 포트에서 디버그 연결을 수신 대기하게 됩니다. 별도의 --user-data-dir을 설정하면 브라우저의 새 인스턴스가 열립니다. 이 플래그가 없으면 명령은 실행 중인 브라우저의 새 창을 열고 디버그 모드로 들어가지 않습니다.
다음으로 vscode/launch.json 파일에 다음과 같이 새 섹션을 추가하세요.
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "attach",
"name": "Attach to browser",
"port": 9222
}
]
}
이제 F5를 누르거나 실행 및 디버그 보기에서 시작 버튼을 클릭하여 실행 중인 브라우저에 연결할 수 있습니다. 다른 컴퓨터에서 실행 중인 브라우저를 디버깅하기 위해 address 속성을 추가할 수도 있습니다.
시작 구성 속성
디버깅 구성은 작업 공간의 .vscode 폴더에 있는 launch.json 파일에 저장됩니다. 디버깅 구성 파일 생성 및 사용에 대한 소개는 일반 디버깅 기사에서 확인할 수 있습니다. 브라우저를 애플리케이션과 함께 "시작"하거나 디버그 모드로 시작한 기존 브라우저에 "연결"할 수 있습니다.
아래는 브라우저 디버깅에 특정한 일반적인 launch.json 속성에 대한 참조입니다. vscode-js-debug 옵션 설명서에서 모든 옵션을 볼 수 있습니다.
webRoot- 소스 코드의 루트 디렉터리입니다. 대부분의 경우 기본값은 작업 공간 폴더입니다. 이 옵션은 소스 맵 확인에 사용됩니다.outFiles- 생성된 JavaScript 파일을 찾는 glob 패턴의 배열입니다. 소스 맵 섹션을 참조하세요.smartStep- 소스 파일에 매핑되지 않는 소스 코드를 자동으로 건너뛰려고 시도합니다. 스마트 건너뛰기 섹션을 참조하세요.skipFiles- 이러한 glob 패턴으로 처리되는 파일을 자동으로 건너뜁니다. 흥미롭지 않은 코드 건너뛰기 섹션을 참조하세요.trace- 진단 출력을 활성화합니다.
이러한 속성은 요청 유형이 launch인 시작 구성에만 사용할 수 있습니다.
url- 브라우저를 시작할 때 자동으로 열 URL입니다.runtimeExecutable- 사용할 브라우저 실행 파일의 절대 경로 또는 사용할 브라우저 버전입니다. 유효한 버전에는stable(기본값),canary,beta,dev가 포함됩니다.runtimeArgs- 브라우저를 시작할 때 전달되는 선택적 인수입니다.
이러한 속성은 요청 유형이 attach인 시작 구성에만 사용할 수 있습니다.
url- 제공된 경우 VS Code는 이 URL을 가진 탭에 연결합니다. 제공되지 않으면 모든 브라우저 탭에 연결됩니다.port- 브라우저의 원격 디버깅에 사용할 포트로, 브라우저를 시작할 때 사용된--remote-debugging-port와 일치합니다. 브라우저에 연결 섹션을 참조하세요.address- 디버깅 중인 브라우저가 수신 대기 중인 IP 주소 또는 호스트 이름입니다. 브라우저에 연결 섹션을 참조하세요.
WebAssembly 디버깅
브라우저의 WebAssembly 디버깅은 Node.js와 동일합니다. WebAssembly 디버깅에 대해 자세히 알아보세요.
소스 맵
VS Code의 JavaScript 디버거는 변환된 코드를 디버깅할 수 있는 소스 맵을 지원합니다. 예를 들어 TypeScript 코드는 JavaScript로 컴파일되며 많은 웹 애플리케이션은 모든 JavaScript 파일을 함께 번들로 묶습니다. 소스 맵은 디버거가 원본 코드와 브라우저에서 실행 중인 코드 간의 매핑 방법을 파악하는 데 도움이 됩니다.
대부분의 최신 웹 애플리케이션 빌드 도구는 즉시 사용할 수 있습니다. 그렇지 않은 경우 Node.js의 소스 맵 섹션에는 브라우저 디버깅에도 적용되는 지침이 포함되어 있습니다.
소스 맵 로드
각 JavaScript 파일은 URL 또는 상대 경로를 통해 소스 맵을 참조할 수 있습니다. 웹 애플리케이션을 다룰 때는 VS Code에서 실행되는 디버거가 액세스할 수 있는 URL인지 확인해야 합니다. 액세스할 수 없는 경우 디버그 콘솔에 어떤 소스 맵이 로드되지 않았고 그 이유를 설명하는 오류가 표시됩니다.
직접 액세스할 수 없는 경우 VS Code는 브라우저의 네트워크 스택을 사용하여 소스 맵을 요청합니다. 이를 통해 인증 상태 또는 브라우저의 네트워크 설정이 요청에 적용될 기회를 제공합니다. 예를 들어 소스 맵이 쿠키 인증으로 보호되는 위치에 있는 경우 브라우저 세션에 필요한 쿠키가 있는 경우에만 VS Code에서 로드할 수 있습니다.