[JS] VSCode에서 디버깅

VSCode에서 디버깅(단축키: F5)을 하면 아래와 같이 오류가 났다.

검색해보니 아래 오류의 경우 원인으로 네트워크 오류가 주로 많아 보였다.

그래서 나도 크롬 개발자도구에서 network를 살펴봤으나 문제가 없었다.

localhost:8080 에 접속 시도를 하기 때문에 오류가 나는 것으로 생각하고, 그에 관련된 설정을 수정하는 방향으로 검색하니 해결할 수 있었다.

 

 

해결방법

launch.json 파일을 수정하면 된다.

기존 파일에서 url 설정이 위와 같이 되어있었는데 수정하지 않으면 계속 저 url로 접속을 시도하기 때문에 주석처리해줘야한다. 그리고 webRoot도 주석처리하고 파일경로를 적어주면 된다.

 

type도 "pwa-chorme"으로 하니 "chrome"으로 대신 사용을 권장하여 바꿔줬다.

위와 같이 변경하니 오류없이 실행됐다.

 

처음에는 file경로에서 "2장" 폴더를 적는 것을 빼먹었는데, 그 경우에 콘솔에 에러메세지도 남지 않고 크롬에서 about:blank 라고만 떠서 뭐가 문제인지 찾느라 좀 걸렸다.

"file": "${workspaceFolder}/age.html"

위 경로가 나오든지 하면 좋았을텐데,,,

 

아래와 같이 파일 경로를 정확히 적어줘야 브라우저에서 내가 보고싶은 화면을 볼 수 있다.

"file": "${workspaceFolder}/2장/age.html"

 

참고

1. https://blog.naver.com/PostView.naver?blogId=kch8246&logNo=222648137463&parentCategoryNo=&categoryNo=17&viewDate=&isShowPopularPosts=true&from=search 

crbug/1173575, non-JS module files deprecated. 오류

2. https://terrorjang.tistory.com/157

[VSCode] Javascript 디버깅