오늘은 평소에는 써보지도 않았지만 프론트엔드를 공부하면서 많이 쓰게 되어 한번 정리해보고 싶어서 이렇게 글을 씁니다!
오늘 설명은 Chrome 기준으로 설명 해보겠습니다

개발자 도구란 무엇인가??

개발자 도구는 브라우저에서 제공하는 하나의 도구(toll)입니다.
웹사이트를 즉각적으로 수정하고 문제들이 발생하면 원인을 즉각적으로 파악하여 빠르게 더 나은 사이트를 만들수 있도록 도와줍니다!

개발자 도구 실행 방법

개발자 도구는 브라우저에서 제공하기 떄문에 설치를 하실 필요가 전혀 없고 단축키나 마우스 오른쪽 마우스를 이용해 실행 할수있습니다.
윈도우 컴퓨터는 ctrl + shift + i 눌러 실행 가능하고
맥은 command + optin + i 를 눌러 실행 가능합니다.

개발자 도구에는 어떤것들이 있을까?

개발자 도구에는 여러 pnel(teb)들이 존재 합니다 그중에서 가장 자주 사용되는 panel들을 살펴보겠습니다.

• Elements panel
• Console panel
• Network panel
• Application panel

Elements panel

Elements Panel 은 HTML 코드를 분석하고 실시간으로 수정 할수 있는 도구 패널입니다.
또한 DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 해볼수도 있고 변경된 사항들에 대해 실시간으로 브라우저를 통해 확인 할수있습니다.

💡 사진을 보면 아래쪽에 Styles 탭이 있는데 그 안에 순서들은 우선순위(구체적) 에서 추상적인 순으로 이루어져 있다.

Console panel

Console 패널은 자바스크립트의 코드들을 즉시 실행해 볼수 있고 또 디버깅을 바로바로 확인이 가능합니다.
console은 객체라고 합니다.log , clear 같은 여러 다양한 메소드들을 사용 할수 있습니다.

Console panel 쓰면서 알아 두면 좋은 점들을 말해볼려 합니다.

• 콘솔 내용 지우기
  clear()또는 ctrl + L
• 콘솔 탭을 다른 탭에서도 같이 보기
  콘솔창에서 esc를 누르면 아래 탭이 하나 생기면서 다른 탭이랑 같이 볼수있습니다.
  

Network panel

Network panel은 페이지에 로딩하는데 필요한 네트워크 작업에 대한 결과를 시간 순으로 표시해주는 탭입니다.

Network panel 을 쓰면 좋은점

• 웹 서버에서 주고받는 실제 데이터 모습을 볼수있다.
• 특정 항목을 선택해서 해당 항목이 어떻게 요청되어 있고 어떤 응답을 받았는지 확인 가능
• 웹페이지를 만들때 포함된 리소스가 로딩되는데 걸리는 시간 확인가능
• 웹페이지에 포함된 리소르 파일이 존재하는지 확인 가능

Network panel 안에 탭 종류 알아보기

• Filmstrip : 이미지 최상단에 위치한 그래프.
  타임라인형태로 어떠한 데이터가 어떤 순서로 로드 됐는지 표시됩니다.
• Name : 리소스의 이름과 URL 이 표시 됩니다.
• Status : 작동 여부를 숫자로 표시하여 오류를 확인 할 수 있습니다.
• Type : 파일의 형식 html, js 등의 형식을 볼 수 있습니다.
• size : 리소스 들의 파일 사이즈를 표시해줍니다.
• time : 웹페이지(클라이언트)가 요청하고 서버가 응답하는 것 까지의 걸린 시간 을 표시해줍니다
• DOMContentLoaded : DOM Tree 구조를 그리는데 걸리는 시간을 표시합니다
• Load : DOM Tree 구조를 포함 이미지까지 화면에 로드되는 시간을 표시합니다.

Application panel

Application panel은 현재 로딩된 웹 페이지에서 사용된 리소스를 열람할 수 있는 패널입니다.
웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사 한다고 합니다

Local Storage, Session Storage ,Cookie

이 두가지 Storage는 서로 지속성이 다른 아이들입니다 어떤말인지 한번 알아보겠습니다

• Local Storage
  로컬스토리지의 데이터는 한번 저장하면 사용자가 지우지 않는 이상 영구적으로 보관되어 지는 데이터 입니다.

• Session Storage
  반면 세션 스토리지는 지속적으로 보관되지 않고 브라우징 되어 있는 내에서만 데이터가 유지 됩니다.
  보안이 중요한 정보(은행 사이트), specific한 유저 정보 에 적용 된다고 합니다.

• Cookie
  웹서버가 웹 브라우저에게 보내 저장했다가 서버의 부가적인 요청이 있을때 다시 서버로 보내주는 문자열정보 입니다.

🤔회고

요번에 인스타그램 클론 코딩을 진행하면서 정말 많이 사용해본 개발자 도구를 조금더 자세히 알게 된 시간이였던거 같다. 다음에 네트워크에 대해 조금더 공부를 해보고 글을 하나 더 쓰고 싶다는 생각을해보는 시간이였던거 같다