클라이언트 사이드 JS 디버깅

Reading time: 2 minutes

클라이언트 사이드 JS 디버깅

클라이언트 사이드 JS를 디버깅하는 것은 번거로울 수 있습니다. URL을 변경할 때마다(사용된 파라미터나 파라미터 값의 변경 포함) 중단점을 재설정하고 페이지를 새로 고쳐야 합니다.

debugger;

JS 파일 안에 debugger; 라인을 넣으면, 브라우저가 JS를 실행할 때 그 위치에서 디버거가 중지됩니다. 따라서 상수 중단점을 설정하는 한 가지 방법은 모든 파일을 로컬로 다운로드하고 JS 코드에서 중단점을 설정하는 것입니다.

오버라이드

브라우저 오버라이드는 실행될 코드의 로컬 복사본을 가지고 원격 서버의 코드 대신 그 복사본을 실행할 수 있게 해줍니다.
"Dev Tools" --> "Sources" --> "Overrides"에서 오버라이드에 접근할 수 있습니다.

오버라이드를 저장할 로컬 빈 폴더를 생성해야 하므로, 새 로컬 폴더를 만들고 그 페이지에서 오버라이드로 설정하세요.

그런 다음, "Dev Tools" --> "Sources"에서 오버라이드할 파일을 선택하고 우클릭하여 "Save for overrides"를 선택합니다.

이렇게 하면 JS 파일이 로컬로 복사되고 브라우저에서 그 복사본을 수정할 수 있습니다. 원하는 곳에 debugger; 명령을 추가하고, 변경 사항을 저장한 후 페이지를 새로 고치면, 매번 그 웹 페이지에 접근할 때 로컬 JS 복사본이 로드되고 디버거 명령이 그 위치에 유지됩니다:

참고문헌

• https://www.youtube.com/watch?v=BW_-RCo9lo8&t=1529s