개발자 도구는 브라우저(Chrome, Safari, IE 등)가 자체적으로 제공하며, 브라우저에 따라 편의성이 달라짐
프론트엔드의 경우 하루종일 봐야하는 화면이며, Chrome이 편리해서 많은 개발자가 활용함
(본 강의는 Chrome 중심으로 설명)
Mac에서 command+option+i로 개발자 도구를 켜거나, 사이트 창에서 우클릭 후 검사를 누르면 켤 수 있다.
Elements
해당 페이지의 스타일(CSS)를 검사하고 편집할 수 있음
왼쪽 패널에 HTML이 있고 우측에 CSS가 있다.
차례대로 레이아웃이 어떻게 짜여있는지 보고, 어떤 방식으로 구현했는지, URL 등을 따올 수 있다. 만약에 클론 프로젝트를 하고 있다면 Elements 탭에서 URL을 찾아볼 수 있다.
화면 상에서 원하는 요소의 소스를 바로 찾기 위해서는 왼쪽 상단의 select 버튼을 누르고, 찾기 원하는 요소에 커서를 올리면 즉각적으로 찾아준다.
특정한 요소를 클릭하면 오른쪽 CSS 패널에 해당 요소에 관련된 CSS 코드들이 나오고, 해당 CSS 코드를 수정하면서 즉각적으로 반영된 화면을 볼 수 있음
Network
프론트엔드에서 백엔드에 API를 호출하는데, 제대로 호출했는지, 권한은 있는지, 혹은 문제가 발생했다면 어디에서 오류가 발생했는지, 응답은 왔는지 등 모든 내용들이 들어있음
특히 XHR 탭에서 확인이 가능하며, 에러가 발생했을 때 해당 탭을 먼저 확인해보고 헤더와 프리뷰를 보고 확인해야한다.
