생성 된 자바 스크립트를 디버깅하는 대신 Visual Studio에서 TypeScript 소스를 디버깅하는 방법이 있습니까?
TypeScript 언어 사양에서 :
TypeScript는 선택적으로 소스 맵을 제공하여 소스 레벨 디버깅을 가능하게합니다.
따라서 ts 코드에 중단 점을 배치하고 디버그 할 수있을 것으로 예상했지만 작동하지 않습니다. 사양에서 디버깅에 대한 다른 언급을 찾지 못했습니다. 이 작업을 수행하기 위해해야 할 일이 있습니까? 아마도 "선택적으로"라는 단어는 그것이 작동하기 위해 뭔가를해야한다는 것을 암시합니다 ... 어떤 제안이 있습니까?
답변:
VS2017 이상에 대한 현재 답변
Visual Studio에서 직접 Typescript 디버깅은 VS2017 이후로 가능했습니다. 로부터 문서 :
Visual Studio를 사용하여 JavaScript 및 TypeScript 코드를 디버깅 할 수 있습니다. 중단 점을 설정하고 적중하고, 디버거를 연결하고, 변수를 검사하고, 호출 스택을보고, 기타 디버깅 기능을 사용할 수 있습니다.
Visual Studio의 Debugging Typescript / Asp.NET Core에 대한 추가 리소스도 있습니다 .
Visual Studio Code 에서 typescript를 디버그 할 수도 있습니다 .
Visual Studio Code는 기본 제공 Node.js 디버거를 통해 TypeScript 디버깅을 지원하고 또한 Debugger for Chrome과 같은 확장을 통해 클라이언트 측 TypeScript 디버깅을 지원합니다.
이전 버전의 VS에 대한 원래 답변 :
VS에서는 디버깅이 불가능할 수 있지만 일부 브라우저에서는 가능합니다. Aaron Powell은 오늘 Chrome Canary에서 작동하는 중단 점을 얻는 방법에 대해 블로그에 올렸습니다. https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .
Aaron이 말한 것을 (매우 간략하게) 요약 -sourcemap하면 컴파일러 의 스위치 를 사용 *.js.map하여 소스와 동일한 디렉토리에 파일 을 생성합니다 . 소스 맵 을 지원하는 브라우저 (Chrome Canary 및 Mozilla 아이디어이므로 아마도 최신 Firefox 빌드)에서 .ts일반 .js파일 처럼 소스 를 디버깅 할 수 있습니다.
블로그는 "Visual Studio 또는 IE (또는 둘 다) 팀도 소스 맵을 선택하여 지원을 추가하기를 바랍니다."로 끝납니다. -아직 발생하지 않았 음을 의미합니다.
최신 정보:
TypeScript 0.8.1 릴리스와 함께 이제 Visual Studio에서도 소스 맵 디버깅을 사용할 수 있습니다.
https://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx
발표에서 :
디버깅 TypeScript는 이제 소스 레벨 디버깅을 지원합니다! 소스 맵 형식은 JavaScript로 번역되고 다양한 브라우저 및 도구에서 지원되는 언어를 디버깅하는 방법으로 인기를 얻고 있습니다. 0.8.1 버전에서는 TypeScript 컴파일러가 공식적으로 소스 맵을 지원합니다. 또한 Visual Studio 2012 용 TypeScript의 새 버전은 소스 맵 형식을 사용한 디버깅을 지원합니다. 이제 명령 줄에서 JavaScript 출력에 해당하는 소스 맵 파일을 출력하는 --sourcemap 플래그 사용을 완전히 지원합니다. 이 파일을 사용하면 소스 맵 지원 브라우저 및 Visual Studio에서 원본 TypeScript 소스를 직접 디버깅 할 수 있습니다. Visual Studio에서 디버깅을 활성화하려면 TypeScript 프로젝트를 사용하여 HTML 애플리케이션을 만든 후 드롭 다운에서 '디버그'를 선택합니다.
업데이트 :
WebStorm은 SourceMaps를 통한 디버깅 지원도 추가했습니다. http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- 그리고 훨씬 더 /
첫째, WebStorm은 TypeScript, CoffeeScript 및 Dart와 같은 최신 언어를 사용하여보다 스마트하고 간소화 된 웹 개발을 가능하게합니다. WebStorm 6은 이러한 언어를위한 최고급 코드 편집기를 제공하는 것 외에도 다음을 제공합니다.
지원되는 모든 플랫폼에서 브라우저가 인식하는 언어로 이러한 고급 언어를 자동으로 컴파일 / 변환합니다. 소스 맵과 함께 TypeScript, Dart 또는 CoffeeScript의 모든 기능을 갖춘 디버깅.
VS2013 Typescript 응용 프로그램을 사용하면 web.config에서 아무것도 변경할 필요가 없습니다. ts 파일에 중단 점을 넣고 IE에서 디버깅했는데, 중단 점이 TypeScript 내에서 중단되었습니다.
Visual Studio로 typescript 디버깅은 올바른 설정으로 작동합니다. (이전 버전의 VS에서는 때때로 문제가 발생합니다. 아래는 VS 2015 CTP 6에서 제대로 작동하는 방법입니다.)
먼저 소스 맵을 생성했는지 확인합니다. 타이프 스크립트를 자바 스크립트로 컴파일 할 때 . 따라서 모든 xxx.js 근처에 xxx.js.map 파일이 있어야합니다.
Visual Studio 외부에서 typescript 컴파일러를 실행하여 소스 맵을 가져 오더라도 tsc 명령 줄에서 문제가 발생하지 않습니다.
--sourcemap %1.ts
gulp 스크립트는 일반적으로 기본적으로 소스 맵을 생성합니다.
Visual Studio에서 웹 애플리케이션을 구성합니다 .
Internet Explorer 를 시작 브라우저로 설정하십시오 . IE에서만 작동하고 다른 브라우저가 작동하지 않을 것이라고 생각합니다.
프로젝트 속성에서 "웹"탭으로 이동하여 하단의 "디버거"섹션을 구성하십시오. 모든 디버거를 비활성화하십시오 ! 이것은 반 직관적이며 다음 오류 메시지가 표시 될 수 있습니다.
디버거를 시작하려고했지만 웹 속성 페이지의 현재 디버그 설정에 따라 디버깅 할 프로세스가 없습니다. "페이지를 열지 마십시오. 다른 프로세스의 요청을 기다립니다"옵션을 선택하고 ASP.NET 디버깅을 사용할 수없는 경우이 문제가 발생합니다. 웹 속성 페이지에서 설정을 확인하고 다시 시도하십시오.
오류 메시지에서 알 수 있듯이 웹 속성 맨 위에있는 시작 작업은 " 현재 페이지 " 와 같은 또 다른 옵션이어야합니다 .
지금 또는 나중에 Visual Studio 내 TS 코드에서 중단 점 을 설정 합니다 .
히트 F5
Visual Studio 편집기를 사용하여 ts 파일을 디버그하고 편집 할 수 있지만 "편집 및 계속"이 작동하지 않지만 현재 js 및 js.map 파일을 다시로드하고 계속할 수있는 브라우저는 없습니다. (내가 틀렸다면 누구든지 정정 해주면 행복해질 것입니다.)
TypeScript 디버깅은 내 컴퓨터의 VS2013 업데이트 3에서 전혀 작동하지 않았습니다. 많은 좌절 끝에 VS2013 업데이트 4 CTP로 업데이트하기로 결정했습니다. 마지막으로 VS에서 중단 점이 발생합니다!
짧은 대답 : Visual Studio 다시 시작
배경 : TypeScript를 사용하는 두 개의 다른 프로젝트가있는 두 개의 Visual Studio 2015 인스턴스가 있습니다. 첫 번째 시작된 인스턴스는 올바르게 디버그되지 않았고 두 번째 인스턴스는 올바르게 디버그되었습니다. 모든 프로젝트 설정이 동일했습니다. 마침내 첫 번째 인스턴스를 다시 시작한 다음 TypeScript를 디버깅했습니다 (마지막으로).