브라우저 개발자도구(f12)로 디버깅하기

📌 디버깅 : 에러의 원인을 파악하고 수정하는 과정

코드에 console.log를 찍어 개발자도구에서 확인할 경우 파악이 쉽지 않기 때문에 개발자 도구를 이용하여 디버깅을 하는 것이 좋다.

1. api 에러

1) 개발자도구의 network탭을 확인해본다.
2) 빨간 줄이 뜬 파일 또는 status가 400번대인 부분은 오류가 있을 확률이 높다

• Headers : 호출한 api주소 및 확인 가능, Header에 넣은 정보 확인 가능
• Payload : api 호출 시 같이 보내는 쿼리 값 확인 가능

3) Response/Preview : 서버에서 받은 (에러/정상)데이터 확인 가능

+) 추가 내용

• Api오류 시 백앤드 개발자에게 해결을 요청할 경우
  Network -> Headers -> 오류난 Name 우클릭 -> copy(CURL)의 내용을 보내주면 된다.

2. 변수값 추적

1) source탭 안에서 소스파일을 열어 확인해본다.
2) 오류가 난 경우 코드에 빨간 줄이 생기며 해당 줄의 라인을 디버깅 할 수 있다.
3) 중요 부분(에러 등) 코드의 라인을 클릭해 break해준다.
4) 새로고침시 break가 걸린 라인에서 실행이 중단된다.

멈춘 시점까지 들어온 데이터를 scope에서 확인할 수 있다

• block : 지역변수
• script : 전역변수 및 스크립트에서 사용된 함수

5) ↓ (step into next function call)버튼 사용시 라인별 코드실행이 가능하다.
6) ⏜> (step over next fuction call) : 함수 안으로 들어가지 않고 호출 후 결과만 받아볼 수 있다.