개발자도구란? (DevTools)
각 브라우저마다 제공하는 하나의 도구
Chrome 개발자도구, Safari 개발자도구, Firefox 개발자도구..etc
개발자 도구를 사용하여, 웹사이트의 수정사항을 미리보기 형식으로 즉각적으로 수정하거나 문제 발생시, 원인을 확인하고 빠른 속도로 더 나은 사이트를 만든다.
Open DevTools: 맥command+option+i / 윈도우 ctrl+shift+i / 마우스 우클릭 후, 검사 클릭
개발자 도구에는 여러 개의 패널들이 있는데, 맥과 크롬 기준으로 알아보려고 한다.
Elements Panel
Open Element Panal: 맥 command+option+c
하기 개발자도구 안에 빨간색 박스를 보면 Elements Panel 안에서 html의 구조를 확인 할 수 있다.
어떤 태그들이 사용되었는지, 링크나 영상의 주소도 확인 할 수 있다. 그리고 style에서는 태그의 스타일 속성값들이 어떤지 확인이 가능하다.
그런데 웹페이지에서 원하는 요소에 관련하여 html에서 찾기 어려울 때,
하기 빨간색 박스인 select element 기능을 누르고 원하는 요소에 마우스를 올려놓으면 해당하는 html 안에 있는 태그를 확인 할 수 있다.
Styles 에서 하기와 같이 섹션이 나눠진 것을 볼 수 있는데, 이는 style에 적용되는 우선순위를 나타낸 것이다.
기존 CSS에서 상속을 언급한 적이 있는데, CSS는 상위태그에서 하위태그로 상속한다.
만약 한 태그에 여러가지 스타일을 적용했을 경우, 컴퓨터는 우선순위에 따라 적용한다.
inline style > id (#) > class (.) > tag
inline style 은 직접 태그 안에 속성 값을 적용한 것으로 제일 상위에 있는 속성 값으로 1순위라고 보면 된다.
그러나 inline style은 HTML과 섞여 있기에 나중에 어디에 있는지 찾기가 어렵다.
그렇기에 사용을 자제하는 것이 좋다.
밑 줄 표시된 것은 해당 속성이 적용되지 못한 것인데, 이는 우선순위에서 밀린 것이다.
user agent stylesheet?
브라우저의 기본 스타일 값을 의미한다.
각 브라우저마다 스타일의 기본값이 다르기 때문에,
CSS 파일에 속성값을 정했다고 하더라도 브라우저마다 다르게 보인다.
그래서 reset.css 또는 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업을 한다.
Console Panel
Open Console Panal: 맥 command+option+j
자바스크립트 코드를 즉시 실행해 볼 수 있고, 디버그를 실행 할 수 있다.
코드를 바로 실행 할 수 있다는 것은 결과물도 바로 확인 할 수 있다는 것이다.
하기처럼 공부할 때도 console Panel을 이용하여 바로 값을 확인 할 수 있다.
console 창에서 enter 를 바로 치면 코드가 실행되기 때문에 shift+enter 를 쓰면 줄바꿈이 되고, 코드는 실행되지 않는다.
console창을 깨끗히 하는 팁
clear()를 console에 찍는 방법
맥: command+k
Source Panel
페이지에 로드된 파일들의 내용을 보면서 자바스크립트 디버깅 실행
디버그는 프로그램이 의도하지 않은 방향으로 실행된다거나 오류가 발생하여 실행이 중단되는 원인을 찾아내고, 수정하는 작업과정이다.
Network Panel
해당 사이트에서 통신하고 있는 모든 목록을 호출하는 것이 나와있다
어떤 것을 호출 했는지, 어떤 것들이 호출되지 않았는지 확인 가능하다.
XHR : API를 호출했을 때 제대로 호출되었는지 어떤 API가 에러가 있는지 확인 가능하다.
프론트엔드에서 호출을 잘 했는지, 백엔드에서 응답을 잘했는지,
어느 것이 호출이 안되었는지, 제대로 통신이 되고 있는지 확인 할 수 있기 때문에 너무너무 중요하다.!
Application Panel
캐시, 스토리지등 브라우저의 저장소
Local Storage
- 지속적으로 필요한 데이터 저장소 (영구성이 보장). 브라우저를 닫아도 남는다.
- key-Value 객체 형태로 데이터를 저장한다.
- 로그인 시 ID값이 이미 써져있다거나 비회원상태에서 장바구니에 물건을 추가했을 때
- 서버에 불필요하게 저장하지 않기 때문에 용량이 크다.Session Storage
- 잠깐 동안 필요한 데이터 저장소
- 브라우저나 윈도우를 닫았을 경우, 제거된다. 일정시간이 지나면 삭제된다.
- 보안이 중요한 은행 사이트, 언어선택 시, specific한 유저 정보인 경우Cookie
- 빠른처리가 필요한 임시데이터 같은 것이 쿠키로 저장된다.
- 오늘만 하는 이벤트 팝업, 서비스 약관 동의 등.
비밀번호와 같은 중요정보는 storage에 저장하면 위험하다.
Local, Session storage는 클라이언트 사이드이기 때문에 쉽게 해킹당할 수 있기 때문이다.
🙋🏻♀️ Today,
코딩에 관련하여 전혀 몰랐을 경우, 개발자도구를 사용할 일이 전혀 없었다.
그렇기에 나에게 개발자도구는 너무나도 낯선 도구이다.😭😭
그나마 익숙한 것이 Elements 와 Console panel이다.
그 중에서도 내가 쓰고,알고있던 부분은 극히 일부분이었다.
공부하면서 굉장히 좋은 기능이 있다는 것을 알게 되었고,
서툴고 쓰기 어색하지만 자주 접하다보면 어느순간 내 것이 되어있지 않을까?
사람이든 물건이든 자주 접해야 친해지고 익숙해진다.
흐르는 시간이 아깝지 않게 잘 활용해야겠다.
사람은 적응의 동물이니까!👍🏻👍🏻
