TIL 9. [개발자도구] Elements, Console, Network and Application

sooo·2020년 9월 19일
0
post-thumbnail

개발자 도구란?

웹 브라우저에는 대부분 개발자 도구라는 것이 탑재되어 있다. 말 그대로 개발자들의 작업을 도와주는 도구이다. 개발자 도구를 잘 알면 생산성을 극대화할 수 있다. 여기에서는 Chrome 브라우저를 기준으로 설명할 것이다.

Chrome DevTools 열기

  1. Chrome 메뉴에서 도구 더보기 > 개발자 도구 선택
  2. 마우스 오른쪽 클릭하고 검사 선택
  3. 키보드 단축키 Ctrl+Shift+I (Windows) 또는 Cmd+Opt+I (Mac)

개발자 도구를 열면 아래와 같은 화면이 보인다:

개발자 도구에는 여러 탭이 있는데 많이 쓰이는 것은 elements, console, network, application 등이다.

Elements

페이지의 HTML 코드를 보여주는 탭이다. 페이지의 구성을 확인하고 CSS 코드도 실시간으로 수정해볼 수 있다. 웹개발자에게 필수적인 기능이며, 백엔드 개발자 역시 웹 크롤링시 HTML 코드를 분석하기 위해 유용하게 사용할 수 있다. 코드에 마우스를 올리면 해당 부분이 페이지에 표시된다.

또는 위 버튼을 클릭하고 페이지의 원하는 부분을 클릭하면 해당 요소의 HTML과 CSS 코드로 바로 이동한다.

위 버튼을 누르면 반응형 또는 모바일 기기별 화면을 확인해볼 수 있다.

Console

console 탭에서는 javascript를 실시간으로 실행할 수 있다. 명령어를 입력하고 Enter 키를 누르면 명령이 수행되며, 줄바꿈을 수행하려면 Shift + Enter 를 누르면 된다.

콘솔 기록을 지우려면 상단 탭의 Clear console 버튼 또는 단축키 Ctrl + L 을 누른다.

페이지를 새로고침해도 기록이 지워지지 않게 하려면 Console settings에서 Preserve log를 체크해주면 된다.

Network

네트워크 탭에서는 현재 페이지에서 로드되고 있는 모든 파일 목록을 실시간으로 볼 수 있다. 브라우저와 서버 간의 http 통신 상태를 확인할 수 있으므로 성능 분석과 개선을 위해 유용하다.


아래 탭 부분을 클릭하여 각 리소스들을 타입별로 나누어서 볼 수 있다. 또 파일 이름을 클릭하면 자세한 정보를 볼 수 있다.

status code

HTTP 응답 코드는 해당 요청이 정상적으로 완료되었는지 알려주는 코드이다. 다섯 가지 그룹으로 나누어진다.

  1. Informational responses (100–199)
  2. Successful responses (200–299)
    예시) 200 OK
  3. Redirects (300–399)
    예시) 301 Moved Permanently
  4. Client errors (400–499)
    예시) 400 Bad Request, 404 Not Found
  5. Server errors (500–599)
    예시) 500 Internal Server Error

Application

애플리케이션 탭에서는 브라우저에 저장된 스토리지, 쿠키, 캐시 등을 확인할 수 있다. 브라우저에 데이터를 저장하는 방법에는 여러 가지가 있다.

Local Storage: 사용자가 삭제하지 않는 이상 계속 브라우저에 남아 있다. 보안이 중요한 영구 데이터를 저장할 때 사용된다(자동 로그인 등). 데이터는 도메인 단위로 공유된다.

Session Storage: 로컬 스토리지와 달리 탭을 닫으면 제거되며, 같은 도메인에서도 창/탭 단위로 서로 다른 데이터를 사용한다. (은행 보안로그인 시스템 등)

Cookies: 만료 기한이 있는 저장소이다. 빠른 처리가 필요한 임시 데이터를 저장하며, 최대 4kb로 용량이 작다. 방문기록, 검색기록, 사용자 인증 등에 사용된다.

Cache: 다시 사용할 가능성이 높은 웹 페이지 요소들을 저장하여(이미지, 오디오, 비디오 등) 웹사이트를 재방문할 때 로드하는 시간을 단축시킬 수 있다. 사용자가 삭제하지 않는 이상 계속 남아있다.

0개의 댓글