[Debugging] 브라우저 디버깅

■ 브라우저의 개발자 툴을 이용한 디버깅

  □ Network 탭을 이용한 디버깅

    - 서버와 상호작용을 할 때 디버깅을 할 수 있도록 도와주는 도구.

    - 네트워크 탭에선 로드되는 파일의 정보를 알 수 있다. 상태값, 속도...

      (에러가 생겼거나 그 외 문제가 있을 때엔 상태값으로 표현된다. 200, 401 등)

    1) Headers

    2) Payload

    3) Response

    4) Preview

 

  □ Sources 탭을 이용한 디버깅

    - 브라우저에서 오류가 발생한 부분이 표시되기도 한다.

    - Breakpoint 를 이용해서 시점과 정보들을 확인할 수 있다.

     1) 전역변수, 지역변수, 함수 등의 정보 확인 가능

     2) 단계별 소스 실행 가능