ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Blazor에서 typescript 디버깅
    HelloJkw 개발 2022. 3. 6. 17:03

    typescript로 js파일을 만들었다.

    wwwroot/jskakaomap.jskakaomap.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파일을 복사해서 잘 로딩되도록 세팅

    이제 wwwrootkakaomap.ts파일을 복사해 넣으면 된다.

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

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

    copy /Y KakaoMapBlazor\*.ts wwwroot

     

    이제 디버깅이 잘 된다.

    댓글 0

Designed by Tistory.