어떤 디버깅을 해봤냐고 면접 때 질문을 받았는데 콘솔로 찍어본 거 이외에는 제대로 대답하지 못 했다. 그래서 디버깅에 대해서 알아봄.
-
콘솔로 찍어서 하기
-
브라우저에서 하는 디버깅-크롬 개발자 도구
1) sources에서 breakpoint 추가
2) debugger; 라는 코드를 써서 breakpoint 만들 수 있다
network에서 element의 연결 상태를 볼 수 있음
response : 받은 데이터를 볼 수 있다
payload : 쿼리를 볼 수 있다
scope : 변수 확인(local, script, global)
callstack : 함수가 어떤 순서로 실행되었는지 확인 가능
play(resume) : breakpoint를 만날 때까지 실행한다
step over : 한 줄씩 디버깅
step into : 함수 안으로 들어감
step out : 함수 밖으로 나감
step : 프로그램이 실행되는 순서에 따라서 움직여줌
network -> name -> 오른쪽 마우스 : 여러 가지 유용한 옵션들 복사 가능(백엔드 환경 등)
closure : 감싸져 있는 함수를 의미
tip)
ctrl+shift+p = node screenshot : element만 캡쳐할 수 있다.
source -> filesystem : 크롬 개발자 도구의 코딩 툴
element 에서도 할 수 있음
눈알 버튼 : enter를 칠 필요 없이 코드가 바로바로 출력에 반영된다.
snippets : 긴 코드 작성에 유용
ads 애드블록 시뮬레이션 : 검색해서 사용, 애드블록을 쓰는 유저 대상 시뮬레이션 가능
- IDE에서 하는 디버깅
이클립스-breakpoint를 만들고 이클립스의 벌레 모양 아이콘(디버거)를 통해 실행한다.
Resume : 지정해놓은 지점까지 code 실행
Terminate : 디버깅 종료
Step info : 지정된 method의 세부 정보로 이동
Step over : 한 줄씩 디버깅
Step return : method 밖으로 나감
Java : Java code로 이동
vscode-단축키 f5로 디버깅 기능 이용 가능.(Run-디버그)
Run and Debug-언어 옵션을 설정한다.
● create a launch.json file 기능으로 옵션을 고정시켜서 선택 가능
● breakpoint 설정
variables : 변수 확인(local, global), 더블클릭으로 변수 변경 가능
watch : 내가 관심있는 것을 확인, 문장 작성 가능
더블클릭 또는 + 버튼 눌러서 수식 변경해볼 수 있음
loaded script, breakpoint
edit breakpoint : 특정한 조건을 만족할 때만 breakpoint가 동작
디버거를 통해서 디버깅을 하면 콘솔로 찍어서 하는 것보다 조금 더 interactive하게 디버깅을 할 수 있다.
