VS 코드로 디버깅

VS Code는 코드를 작성하는 데 매우 강력한 도구이지만 디버그를 본 대부분의 개발자는 일반적으로 브라우저 개발자 도구를 사용합니다. VS Code는 사용자 정의가 가능하고 다양한 디버깅 경험을 제공합니다. 프런트 엔드 프로젝트에서 작동하도록 디버거를 성공적으로 사용하고 사용자 정의하는 방법을 보여 드리겠습니다.

GUI의 실행 및 디버그 메뉴 항목을 사용하여 디버깅 메뉴를 불러오거나 핫키가 마음에 들면 ⇧⌘D를 사용할 수 있습니다. 이 메뉴는 몇 가지 GUI 옵션을 제공하지만 가장 인상적인 부분은 JSON을 사용하여 디버깅 환경을 사용자 지정하는 것입니다. 클릭하여 디버깅에 사용되는 JSON 파일을 만듭니다. 창 오른쪽 하단에 JSON을 작성하는 데 도움이 되는 구성 추가 버튼이 표시됩니다.

구성 배열에서 추가하려는 특정 속성입니다. 이름 키는 테스트 대상이며 원하는 이름이 될 수 있지만 미래의 자신에게 친절하고 설명적이어야 합니다. 다음은 유형이 될 것입니다. 대부분의 프런트 엔드 테스트에서는 크롬을 제공합니다. 그런 다음 시작 요청 속성을 지정하면 프로젝트가 시작됩니다. 다음 키/값 쌍은 로컬에서 실행되는 라이브 서버 주소의 URL과 주소입니다. 마지막으로 ${workspaceFolder} 키를 사용하여 webRoot를 추가하면 VS Code에서 작업 중인 위치를 알 수 있습니다. 모든 보내기 및 완료는 다음과 같습니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debugging",
      "type": "chrome",
      "request":  "launch",
      "url": "http://127.0.0.1:5500/index.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

이제 디버거의 드롭다운 메뉴에서 구성에 액세스할 수 있습니다. 해당 디버거 인스턴스를 실행하면 프로젝트와 함께 Chrome의 새 인스턴스가 열립니다. 이제 개별 코드 줄 왼쪽에 중단점을 추가할 수 있으며 중단점을 추가한 줄에서 코드 실행이 중지됩니다. 중단점이 활성화되면 오른쪽 상단 버튼을 사용하여 코드를 탐색할 수 있습니다. 계속/일시 중지, 한 단계씩 건너뛰기, 한 단계씩 실행, 한 단계씩 나가기, 다시 시작 및 중지가 있습니다.


이 시점에 이르면 다른 멋진 일을 할 수 있습니다. 변수 위로 마우스를 가져가면 해당 값을 볼 수 있으며 감시 탭에 변수를 추가하여 코드가 실행될 때 변수 값을 추적할 수도 있습니다. 변수 탭을 사용하면 각 범위에서 사용 가능한 변수를 확인할 수 있습니다. 호출 스택 탭은 현재 호출 스택의 모양에 대한 통찰력을 제공합니다.


이제 VS Code의 디버거가 무엇을 할 수 있는지 살짝 엿보았으므로 스스로 더 깊이 파고들어 디버거의 기능을 실제로 이해하고 싶을 것입니다. 자세한 내용은 디버거에 대한 문서Official Microsoft로 이동하여 launch.json 파일에 추가할 수 있는 구성을 이해하는 것이 좋습니다.