[JS] debugger

jiseong·2021년 10월 2일
0

T I Learned

목록 보기
89/291

운이 좋게도 유튜브 영상을 보다가 scope나 this와 같이 학습하면서 직접 확인하기 어려운 개념들을 참고하는데 도움을 얻을 수 있는 debugger라는 좋은 기능을 알게되었다.

1. 디버깅을 위한 VScode 확장프로그램 설치

많은 사람들이 아래의 extension을 추천하지만 deprecated 되었다고 한다..

다행히도 JavaScript Debugger도 동일한 기능한다고 하여 아래의 extension을 설치했다.

2. 디버깅 실행하기 전 설정

VScode의 Run 탭 - Start Debugging을 클릭하거나 F5를 누르고 chrome을 선택하면 자동으로 .vscode 하위에 launch.json 파일이 생성된다. (안된다면 직접 생성해도 된다.)

디버깅으로 실행 시 launch.json 파일을 참고하여 실행하기 때문에 꼭 필요하다.

여기서 port 번호만 변경해주면 되는데 파일이 실행되고 있는 port 번호로 변경해주면 된다.

3. 디버깅 활용

VARIABLES는 scope라 보면 된다. 해당 지역 함수 내에서 i 값을 찾지 못하면 scope chain을 통해서 i 값을 찾는 것을 확인 할 수 있다.

그 밖에 현재 this가 무엇을 가리키는지도 알 수 있으며, 지역변수도 확인 할 수 있다.

0개의 댓글