VS Code를 위한 Chrome 디버깅 소개

2016년 2월 23일 by Andy Sterland and Kenneth Auchenberg

Visual Studio Code의 첫 출시 이후, 개발자의 일상 워크플로우를 단순화하기 위해 편집기에서 직접 코드를 디버깅할 수 있도록 하는 데 중점을 두었습니다. .NET 및 Node.js 디버깅으로 시작했으며, 오늘 Visual Studio Code용 Chrome 디버거를 소개하며 다음 단계를 밟고 있습니다.

저희 Chrome 디버거를 사용하면 프론트엔드 개발자가 Visual Studio Code에서 직접 Google Chrome 내부에서 실행되는 클라이언트측 JavaScript 코드를 디버깅할 수 있습니다.

어떻게 작동하나요?

저희 디버거는 Chrome 디버거 프로토콜을 통해 Chrome에 연결하여 작동하며, 브라우저에서 로드된 파일을 Visual Studio Code에서 열린 파일에 매핑합니다. 이는 개발자가 이제 편집기를 떠나지 않고도 소스 코드에 직접 중단점을 설정하고, 변수를 조사하도록 설정하고, 디버깅할 때 전체 호출 스택을 볼 수 있다는 것을 의미합니다.

위 예시에서는 AngularJS 앱이 Browserify를 통해 번들 및 축소되어 VS Code에서 디버깅되는 것을 보여줍니다. 저희 디버거는 JavaScript 소스 맵을 이해하기 때문에 이것이 가능합니다. 이를 사용하여 개발자는 브라우저가 보는 트랜스파일된 결과가 아닌 원본 소스에서 직접 디버깅할 수 있습니다. 소스 맵 지원은 TypeScript를 VS Code에서 직접 디버깅하는 것도 가능하게 합니다.

현재로서는 Chrome을 원격 디버깅을 활성화하여 시작해야 하며, 동시 연결은 하나만 지원합니다. 이는 Chrome 내에서 개발자 도구를 열면 VS Code와의 연결이 Chrome에 의해 종료됨을 의미합니다. 이것은 약간 성가신 일이며, 이 이슈가 곧 해결되기를 바랍니다.

시작하기

시작하려면 **확장** 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))를 엽니다. 확장 목록이 나타나면 'chrome'을 입력하여 목록을 필터링하고 Debugger for Chrome 확장을 설치합니다. 그런 다음 README 여기에서 자세히 설명하는 실행 구성 파일을 만듭니다.

VS Code를 이미 실행 중인 Chrome 인스턴스에 연결하도록 설정하거나 원격 디버깅을 활성화하여 새 인스턴스를 시작할 수 있지만, 이에 대한 자세한 내용은 README에서 읽어보세요.

지원 기능

이 첫 번째 릴리스에서는 다음 기능을 지원합니다.

• 소스 맵이 활성화된 경우 소스 파일 내에서도 중단점 설정
• TypeScript, 소스 맵을 통해
• Chrome 페이지의 버튼을 사용하는 것을 포함한 스텝
• VS Code 지역 변수 창을 통한 지역 변수 범위
• eval 스크립트, script 태그 및 동적으로 추가된 스크립트 디버깅
• VS Code 시계 패널을 통한 시계.
• 디버그 콘솔
• 대부분의 콘솔 API

앞으로

웹을 위한 구축이 최근 몇 년간 믿을 수 없을 정도로 복잡해졌기 때문에, 우리는 프론트엔드 개발자를 위한 많은 일이 있다고 믿습니다. Chrome 디버거를 통해 우리는 브라우저와 다양한 공급업체의 도구가 함께 작동하고 웹을 위한 구축이 더욱 통합적으로 느껴지는 더 간단한 웹 개발 워크플로우를 향한 첫걸음을 내딛고 있습니다.

이 확장은 GitHub에 MIT 라이선스 오픈소스 프로젝트로 릴리스했습니다. 작업 중인 프로젝트이므로 알려진 버그는 이슈 페이지를 참조하십시오. 예를 들어, 생성된 소스 맵의 모든 변형을 지원하는 데 몇 가지 이슈가 있습니다.

현재는 Google Chrome을 지원하지만, Microsoft Edge 및 기타 브라우저로 지원을 확장하는 것도 고려하고 있습니다. 우리는 더 나은 디버깅 경험을 구축하기 위해 여러분의 피드백과 도움이 정말로 필요합니다.

이슈가 있거나 개선 아이디어가 있으면 Twitter 또는 GitHub에서 언제든지 문의하십시오.

–

Andy Sterland, Senior Program Manager, JavaScript Diagnostics
Kenneth Auchenberg, Program Manager, JavaScript Diagnostics