Chrome 디버깅의 새로운 기능

Name: Visual Studio Code
Author: Microsoft

2017년 12월 20일, Kenneth Auchenberg 작성

지난 몇 달 동안 Visual Studio Code의 Chrome 디버깅 환경을 개선하기 위해 노력했으며, 오늘 클라이언트 측 JavaScript 디버깅을 VS Code에서 더 쉽고 안정적으로 만들어 줄 세 가지 새로운 기능을 출시하게 되어 기쁩니다.

Microsoft의 Debugger for Chrome 확장에 익숙하지 않다면, 이 확장 기능은 Google Chrome에서 실행되는 클라이언트 측 JavaScript를 디버깅할 수 있게 해줍니다. 이는 VS Code의 기존 JavaScript 디버깅 환경에 새로운 측면을 더합니다. 기본적으로 Node.js에서 서버 측 JavaScript를 디버깅할 수 있습니다. 두 디버거를 모두 설치하면 원활한 풀스택 JavaScript 디버깅이 가능합니다.

VS Code와 Chrome DevTools를 동시에 사용하세요!

Google Chrome 팀과 함께 가장 먼저 작업한 것은 VS Code와 Chrome DevTools를 동시에 사용할 수 있도록 하는 것이었습니다!

이는 처음부터 사용자의 요청이었지만, Chrome의 다중 원격 디버깅 연결 지원 부족으로 인해 제한적이었습니다. 이는 VS Code가 Chrome에 연결될 때 Chrome DevTools가 종료되고, Chrome DevTools를 열 때 VS Code가 종료된다는 것을 의미했습니다.

다중 연결은 이제 VS Code에서 JavaScript를 디버깅하면서 DOM 탐색기, 프로파일러 또는 Chrome DevTools 내의 다른 도구를 연결이 끊어지지 않고 사용할 수 있다는 것을 의미합니다!

chrome_code

Chrome 팀은 몇 달 전에 이 작업을 시작했으며, VS Code 환경이 최적이 되도록 긴밀하게 협력했습니다. 다중 연결은 Chrome 63에 공식 출시되었으며, VS Code와 함께 기본적으로 작동합니다. 다중 연결 지원을 받으려면 최신 Chrome 버전으로 업데이트하면 됩니다.

Chrome DevTools와 VS Code 간의 동기화된 단계별 실행

VS Code와 Chrome DevTools를 결합할 수 있다는 것은 매우 강력한 경험이라고 생각합니다. 이를 통해 시나리오에 맞는 올바른 도구를 선택할 수 있으며, 한 도구를 다른 도구로 대체해야 하는 어려운 선택을 강요받지 않습니다. VS Code는 편집기에서 JavaScript를 디버깅할 수 있지만, 일부 사용자는 DevTools에서 JavaScript를 디버깅하는 것을 선호한다는 것을 알고 있으므로, DevTools를 대체하려고 하기보다는 통합할 기회로 보고 있습니다.

도구 통합을 위한 첫 번째 단계는 여기서 볼 수 있듯이 Chrome DevTools와 VS Code 간의 동기화된 단계별 실행입니다.

sync_stepping

동기화된 단계별 실행은 VS Code와 Chrome DevTools에서 동시에 JavaScript 소스 코드를 디버깅할 수 있게 해주며, 두 도구 간에 원활하게 이동할 수 있는 기회를 제공합니다. 각 도구 내에서 다른 디버거가 동기화되지 않을까 걱정할 필요 없이 JavaScript를 단계별로 실행, 계속 진행 및 디버깅할 수 있습니다.

아직 초기 단계이지만, 연결된 편집기와 DevTools로 가능한 새로운 통합의 세계를 탐구하게 되어 기쁩니다.

지역화된 디버깅 UI

이번 릴리스에서는 디버거의 핵심 부분에 대한 지역화를 지원했습니다. 이는 break on uncaught exceptions와 같은 기능과 launch.json의 속성 설명이 지역화되어 중국어와 같은 지원 언어로 제공된다는 것을 의미합니다.

locale1

앱이 실행되기 전에 설정된 중단점

Visual Studio의 친구들과 함께 작업한 또 다른 기능은 Chrome에서 실행되기 전에 JavaScript에 중단점을 설정할 수 있는 기능입니다. 이는 매우 간단해 보이지만 JavaScript가 비동기적으로 로드되고 실행되는 방식의 세부 사항을 살펴보면 상당히 복잡합니다.

많은 사용자들이 Chrome을 시작할 때 중단점이 히트되지 않는 경험을 했습니다. 혼란을 더하기 위해 간단한 페이지 새로고침 후에는 중단점이 히트됩니다. 왜 그럴까요? 다소 복잡하지만, VS Code와 Chrome 간의 타이밍 문제로 귀결되며, 이는 타임라인에서 가장 잘 설명됩니다.

타임라인에서 노란색으로 표시된 것처럼, 문제는 VS Code가 중단점을 설정하기 전에 일부 JavaScript가 실행된다는 것입니다.

이는 페이지 로드의 일부로 즉시 실행될 소스 코드에 중단점이 있는 경우, VS Code가 실행이 완료되기 전에 중단점을 설정하지 못한다는 것을 의미합니다. 해결 방법은 코드를 다시 실행하여 중단점을 트리거하는 페이지 새로고침을 수행하는 것입니다.

좋은 소식입니다! 초기 실행 소스 코드에 신뢰할 수 있게 중단점을 설정하는 방법을 찾았으며, 이를 break-on-load breakpoints라고 부릅니다.

break-on-load 중단점은 Chrome의 DOM 계측 중단점을 사용하여 새로운 스크립트가 로드될 때마다 스크립트 실행을 일시 중지할 수 있습니다. 이는 디버거의 워크플로우를 변경하고 JavaScript가 실행되기 전에 중단점을 설정할 시간을 더 많이 확보할 수 있게 해줍니다.

break-on-load 활성화

Chrome 디버거를 위한 실험적인 기능으로 break-on-load 중단점을 출시하고 있으며, launch.json 구성에서 새 breakOnLoad 속성을 true로 설정하여 이 기능을 활성화할 수 있습니다.

{
  "type": "chrome",
  "request": "launch",
  "name": "Chrome",
  "url": "https://:3000",
  "webRoot": "${workspaceRoot}/src",
  "breakOnLoad": true
}

break-on-load 중단점을 활성화하면 디버거가 새 스크립트가 로드될 때마다 Chrome을 잠시 일시 중지하므로 초기 페이지 로드 성능에 영향을 미칩니다. 이러한 이유로 현재는 선택적 기능입니다. 누락된 중단점이 발생하는 경우 break-on-load 중단점을 활성화하고 작동 방식에 대해 알려주시기 바랍니다.

지금까지입니다. Chrome 디버거에 대한 큰 업데이트이며, 새로운 기능에 대한 여러분의 피드백을 기다릴 수 없습니다. 편집기가 DevTools와 더 통합된 세상에서 여러분의 도구에서 무엇을 기대하거나 원하시는지 알려주시기 바랍니다.

행복한 코딩 되세요!

Kenneth (@auchenberg)