TypeScript 코드 디버깅을 Visual Studio로 수행

Visual Studio에서 TypeScript 소스를 디버그하는 방법이 있을까요? (생성된 Javascript를 디버깅하는 대신)

TypeScript 언어 사양에서는 다음과 같이 언급되어 있습니다:

TypeScript는 선택적으로 소스 맵을 제공하여 소스 수준의 디버깅이 가능합니다.

그러므로 TypeScript 코드에 중단점을 설정하고 디버그할 수 있을 것으로 예상했지만, 작동하지 않습니다. 사양에서 다른 디버깅에 대해서는 언급을 찾지 못했습니다. 작동하게 하려면 무언가를 해야 할까요? 아마도 선택적으로라는 단어는 작동을 위해 무언가를 수행해야 한다는 힌트일 것입니다... 어떤 제안이 있을까요?

답변 1

디버깅
TypeScript는 이제 소스 수준 디버깅을 지원합니다! 소스 맵 형식은 JavaScript로 번역되는 언어를 디버깅하는 방법으로 인기가 높아지고 있으며 다양한 브라우저와 도구에서 지원됩니다. TypeScript 컴파일러는 버전 0.8.1부터 공식적으로 소스 맵을 지원합니다. 또한, Visual Studio 2012용 새 버전 TypeScript는 소스 맵 형식을 사용하여 디버깅을 지원합니다.
커맨드 라인에서는 이제 --sourcemap 플래그를 완전히 지원하며, 해당 플래그를 사용하면 JavaScript 출력에 해당하는 소스 맵 파일을 출력합니다. 이 파일을 사용하여 소스 맵을 지원하는 브라우저와 Visual Studio에서 직접 TypeScript 원본 소스를 디버깅할 수 있습니다.
Visual Studio에서 디버깅을 활성화하려면 TypeScript 프로젝트를 만든 후 드롭다운에서 '디버그'를 선택하십시오.

업데이트:

WebStorm은 소스맵을 통한 디버깅 지원도 추가했습니다: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more/

WebStorm은 TypeScript, CoffeeScript 및 Dart와 같은 모던 언어로 더 스마트하고 효율적인 웹 개발을 가능하게 합니다. 이러한 언어들을 위한 일류 코드 편집기를 제공하는 것 외에도, WebStorm 6은 다음과 같은 기능을 제공합니다:

모든 지원하는 플랫폼에서 브라우저에서 인식되는 상위 수준 언어들을 자동으로 컴파일/트랜스파일합니다.
TypeScript, Dart 또는 CoffeeScript의 소스맵과 함께 완전한 디버깅 기능을 제공합니다.

답변 2

비주얼 스튜디오를 사용하여 TypeScript 코드 디버깅하기
비주얼 스튜디오는 개발자들에게 매우 인기 있는 통합 개발 환경(IDE)입니다. 특히 TypeScript 개발을 위해 사용되는 경우 많은 개발자들이 이용하고 있습니다. TypeScript는 Microsoft에서 개발한 프로그래밍 언어로, 정적 타입을 지원하여 JavaScript 코드를 보다 안전하고 유지보수하기 쉬운 형태로 작성할 수 있게 해줍니다.
타입스크립트 코드 디버깅은 개발 과정에서 매우 중요한 부분입니다. 버그가 발생하면 이를 찾아 수정해야 하기 때문에 효율적인 디버깅 도구가 필요하며, 비주얼 스튜디오는 이러한 요구에 맞게 타입스크립트 코드 디버깅을 지원합니다. 이 IDE에서는 다양한 디버깅 기능과 도구를 제공하여 개발자들이 코드 실행 중 발생하는 문제를 찾고 해결할 수 있게 도와줍니다.
비주얼 스튜디오의 타입스크립트 디버깅 기능 중 하나는 중단점(Breakpoint)을 설정하는 것입니다. 중단점은 코드 실행 도중 특정 위치에서 실행이 일시 중단되도록 설정하는 것으로, 개발자가 해당 부분을 디버깅할 수 있게 해줍니다. 디버그 모드에서 코드를 실행하면 중단점에서 일시 중단되며, 개발자는 그 시점에서 변수의 값을 확인하거나 코드의 흐름을 추적할 수 있습니다.
또한, 비주얼 스튜디오는 호출 스택(Call Stack)과 함께 상세한 변수 정보를 제공합니다. 이를 통해 개발자는 실행 중인 코드의 각 라인에서 변수 값과 상태를 쉽게 확인할 수 있습니다. 또한 디버깅 콘솔(Debug Console)을 통해 개발자는 코드 실행 중에 원하는 표현식을 평가하고 결과를 확인할 수 있습니다.
타입스크립트 코드 디버깅에 도움이 되는 비주얼 스튜디오의 다른 기능으로는 오류 및 경고 메시지 표시, 변수 추적, 자동 완성 기능 등이 있습니다. 이러한 기능들은 개발자가 타입스크립트 코드를 작성하는 동안 실수를 방지하고, 코드 작성 속도를 향상시키는 데 도움을 줍니다.
마지막으로, 비주얼 스튜디오는 타입스크립트 코드의 품질과 성능을 분석하는 도구도 제공합니다. 코드 품질 분석기를 통해 잠재적인 문제를 식별하고, 성능 분석기를 통해 코드 실행 시간 및 메모리 사용량을 측정할 수 있습니다. 이러한 분석 결과를 바탕으로 개발자는 코드를 보다 효율적으로 개선할 수 있습니다.
비주얼 스튜디오를 사용하여 타입스크립트 코드를 디버깅하는 것은 개발 과정에서 매우 중요합니다. 이 IDE는 다양한 디버깅 기능과 도구를 제공하여 개발자가 버그를 신속하게 찾고 수정할 수 있도록 도와줍니다. 또한 코드 품질과 성능 분석 도구를 통해 코드의 품질을 개선할 수 있습니다. 이를 통해 개발자는 안전하고 효율적인 타입스크립트 코드를 작성할 수 있으며, 개발 생산성을 크게 향상시킬 수 있습니다.