개발자도구 중 자주 사용되는 툴에 대해서 정리해 보고자 한다.
Elements panel의 기능
- 개발자 도구를 열어올 때 가장 처음 표시되는 도구로, html, css 코드를 확인할 수 있다.
- html, css가 잘 출력되고 동작되고 있는지 확인할 수 있는 기능을 제공해 주며 다양한 방법으로 속성을 추가/제거 및
변경할 수 있게 해준다
* Styles 부분의 순서가 의미하는 것은?
Element 패널의 style 부분의 순서는 Css 파일에 적힌 순서와는 다르다. 가장 먼저 적용되는 순서대로 배치가 된다 이는 곧 캐스케이딩 순서로 배치된다고 볼 수 있다.
그렇다면 캐스케이딩이란 무엇일까?
Element는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 것에 먼저 적용을 받을지에 대한 우선순위가 적용되어야 한다. 이를 캐스케이딩이라 하는데, 캐스케이딩은 명시도에 따라 결정된다.
대상을 명확하게 지정할수록 우선순위가 높아지는데
!important > inline style > id 선택자 > class/attribute/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성 > 코드순서
* User agent stylesheet이란?
브라우저가 임의로 설정해주는 스타일 값이며, 각 브라우저마다 그 값이 다르다.
Console panel의 기능
Java script의 기능을 확인할 수 있다
* 화면을 새로고침해도 console 내용이 지워지지 않고 남게 하는 방법은?
setting에 가서 preserve log를 체크한다.
* 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
clear(); 또는 단축키 cmd+k가 사용가능하다.
단, clear();는 preserve가 걸려있으면 작동하지 않지만, cmd+k는 preserve가 걸려있어도 작동한다.
* 다른 패널(ex.Element panel)에서 console panel과 같이 보는 방법은?
Esc 키를 누르면 같이 볼 수 있다.
Network 패널의 기능은?
웹 브라우저와 서버 사이의 흐름을 파악할 수 있게 도와주는 도구이다.
이 패널을 통해서 웹 사이트의 사진, 동영상 등 자료의 주소를 알 수도 있다.
Applicaion panel의 기능은?
현재 로딩된 웹페이지의 resource를 볼 수 있다.
* local storage, Session storage, Cookie의 차이점은?
키와 데이터 저장소, 저장기한에 따른 차이로 볼 수 있다.
local storage의 경우
웹 스토리지, 브라우저에 저장한다. 사람이 지우지 않으면 계속 남아있으며 영구성을 띈다. 따라서 보안이 중요한 영구데이터들에 사용되며 ex) 자동 로그인시에 아이디와 비밀번호 저장 과 같은 기능들이 로컬 스토리지를 사용하는 기능이다.
Session storage의 경우
세션 스토리지 역시 웹 스토리지, 브라우저에 정보를 저장하나 웹페이지가 커져 있을 동안만 저장되며 일회성을 띈다. 단 새로고침 되어도 창이 꺼지지 않으면 정보가 남아있다. 세션 스토리지는 ex)금융 로그인, 비로그인 장바구니 와 같은 기능들에 사용된다.
Cookie의 경우
쿠키는 하드디스크에 정보를 저장하며 설정한 기간만큼 정보가 남아 있는다. 또한 쿠키는 스트링 값으로 저장되며 보안에 취약하다는 단점이 있다.
