크롬 개발자 모드 사용법(네트워크)

※ 실제 프로젝트를 진행하며 얻은 지식을 정리한 내용입니다.
※ 이론적인 내용보단 실무에서 사용하는 방식 위주로 작성하였습니다.
※ 잘못된 내용이 있다면 댓글로 지적 부탁드리겠습니다.

1. 크롬 개발자 모드 Network 소개

1. 기본 개발자모드 사용법은 아래 게시물을 참고해주세요.
   
   • https://devbeg.tistory.com/34
2. Network 탭은 브라우저가 서버와 주고받는 모든 네트워크 요청을 확인할 수 있는 도구입니다.

---

2. Network 항목 설명

1) 개발자 모드로 진입 후 네트워크 탭으로 이동합니다. (진입방법)

크롬 개발자 모드 사용법(기본 디버깅)

 

    2) 진입 후 확인 가능한 항목은 다음과 같습니다.

        2-1. 좌측 Name 항목은 브라우저(js에서 request)가 서버로 요청한 리소스의 이름 또는 URL의 끝 부분을 보여주는 칸입니다.

        2-2. 만약 아무것도 나오지 않는 다면 새로고침 또는 페이지 재접속을 통해 해결 가능합니다.

        2-3. 우측의 항목은 다음과 같습니다.

            - Header : 브라우저가 서버에 보낸 정보입니다. 요청 주소, Method타입(Get, Post), 상태 등을 알 수 있습니다.

            - Payload : 실제 서버로 던진 데이터를 확인할 수 있습니다. ajax요청 시 서버에 던진 파라미터 확인이 가능합니다.

            - Preview : 서버에서 받은 응답(Response)을 시각적으로 보기 쉽게 보여주는 탭입니다. 리턴 받은 데이터 확인이 가능합니다.

            - Response : 서버에서 받은 원본 데이터 입니다. 리턴 받은 데이터 확인이 가능합니다.

---

3. 사용예시

    1) 전체적인 흐름은 다음과 같습니다.

        1-1) 부서코드를 입력 후 부서명 확인 버튼 클릭 시 서버로 ajax요청이 전송되고, 서버에서 부서명을 리턴해줍니다. 

 

    2)  위 상황을 개발자 도구에서 다음과 같이 확인할 수 있습니다.

    3)  버튼을 클릭하여 서버 요청이 전송되면 좌측 Name 탭에 요청(dept)이 보여집니다.

 

    4) 요청(dept)을 클릭 시 해당 요청에 대한 상세 항목을 확인할 수 있습니다.

        4-1) Header 항목에서 요청한 URL(/dept로 요청)을 확인할 수 있습니다.

        4-2) Payload 항목에서 서버에 던진 파라미터(B0001)를 확인할 수 있습니다. 

        4-3) Preview 항목에서 JSON으로 리턴받은 데이터들을 확인할 수 있습니다.

        4-4) Response 항목에서 리턴받은 데이터 원본을 확인할 수 있습니다.

        4-5) Preview나 Response 둘 중에 보기 편한거로 보시면 됩니다.

---