Blazor에서 typescript 디버깅

typescript로 js파일을 만들었다.

wwwroot/js에 kakaomap.js와 kakaomap.js.map 파일이 생겼다.

크롬 개발자 도구의 js파일에서 breakpoint를 찍었다.

그랬더니 ts파일을 찾을 수 없다는 메세지를 받았다.

Could not load content for https://localhost:44333/_content/_scripts/kakaomap.ts
(HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

방법 1. 그냥 js로 디버깅

이럴 경우 그냥 js로 디버깅 하는 것도 방법이 될 수 있다.

.map 파일을 생성하지 않으면 된다.

tsconfig.json 파일에서 sourceMap 값을 false로 설정하면 map파일이 생기지 않는다.

이렇게 되면 js에서 디버깅 할 수 있다.

방법 2. typescript를 불러오지 못하는 문제 해결하기

1. 위 경로에서 _scripts 로 되는 문제 해결
2. wwwroot에 typescript파일을 복사해서 잘 로딩되도록 세팅

1. 위 경로에서 _scripts 로 되는 문제 해결

/_content/_scripts/kakaomap.ts 에서 ts파일을 찾고 있는 것이 문제이다.

내가 알고있는 static파일을 불러올 수 있는 방법은 /_content/KakaoMapBlazor/* 의 형태 뿐이다.

여기서 KakaoMapBlazor는 assembly name이다.

나는 _scripts폴더의 이름을 KakaoMapBlazor로 바꾸고, 그에 맞게 tsconfig.json도 수정했다.

이렇게 하면 kakaomap.ts를 불러오는 경로는 /_content/KakaoMapBlazor/kakaomap.ts 가 된다.

 

2. wwwroot에 typescript파일을 복사해서 잘 로딩되도록 세팅

이제 wwwroot에 kakaomap.ts파일을 복사해 넣으면 된다.

이 문제는 .csproj의 속성에서 Pre build event 기능으로 해결할 수 있다.

그리고 Pre build event에 KakaoMapBlazor/ 하위 ts파일을 wwwroot 폴더 하위로 복사하는 스크립트를 넣었다.

copy /Y KakaoMapBlazor\*.ts wwwroot

 

이제 디버깅이 잘 된다.