2020-03-28 TIL 개발자 도구에 관하여

seo_kk·2020년 3월 28일
0

개발자 도구

개발자 도구는 개발자에 있어서 없으면 안되는 도구이다.
웹개발을 하며 개발자 도구를 사용하면, 개발 능률이 올라가는 것은 물론이고, 개발자 도구를 사용하지 않는 개발자는 없을 것이다. 개발에 도움이 되며 필수적인 개발자도구에 대하여 공부해보겠다.

로컬스토리지, 세션스토리지, 쿠키의 차이점

  1. 로컬스토리지 - 저장되어 있는 장바구니를 생각하면 쉽다. 사용자가 지우지 않는 이상 브라우저에 계속 남아있다. 항상 들어가는 사이트에 미리 로그인을 설정해 놓으면 로그인을 따로 하지 않아도 로그인을 할 수 있는 것 또한 예로 들 수 있다.

  2. 세션스토리지 - 비로그인 장바구니를 생각하면 쉽다. 한 세션이 탭을 끄면 바로 제거된다. 보안이 중요하고 끄면 바로 유저의 정보가 없어지길 바라는 피시방이나 은행같은 곳에서 중요하다.

  3. 쿠키 - 만료기간이 있는 데이터이다. (백엔드와 관련 있음.) 광고창에서 오늘만 보기, 일주일동안 안보기 같은 것들인데, 사용자가 지정해주는 날짜의 만료기간이 끝나면 다시 광고가 나오는 것을 볼 수 있다. 이러한 것들이 이에 해당한다.

앤드포인트

api의 제일 끝 점이라고 볼 수 있다.

XHR

프론트앤드와 백앤드가 서로 어떻게 데이터를 주고 받았는지 알 수 있다. 이 XHR을 활용 한다면, 백앤드와 프론트앤드 중에서 어떤부분이 잘못되었는지 짐작할 수 있다.

json

프론트와 백이 통신해서 데이터를 받는 api를 뜻한다.

ie 에서 브라우저버전 낮춰서 보는 법

f12 -> 에뮬레이션 -> 문서모드 값 변경

맥-아이폰 연결해서 맥의 사파리에서 아이폰 사파리 개발자도구 탐색하는 법

  1. 맥 - 아이폰의 USB 연결
  2. <아이폰> 설정 - 사파리 - Java Script, 웹 속성 활성화 확인
  3. <맥> 사파리 - 환경설정 - 고급 - 메뉴막대에서 개발자용 메뉴보기 클릭
  4. <맥> 사파리 - 개발자용 - '누구누구'의 아이폰 - 개발자용으로 사용 클릭
  5. <아이폰> 사파리 실행 후 코드 확인 필요한 페이지 열기

ie와 사파리의 application tab과 같은것

어플리케이션 탭에서는 앞전에서 말한 여러 스토리지들과 저장소들을 볼 수 있다.

  1. ie

-쿠키-

개발자도구(F12) - 네트워크 -> 네트워크 트래픽 챕처사용(F5) -> URL선택 -> 쿠키

-스토리지-

콘솔 내 console.log(sessionstorage) / console.log(localstorage) 입력

  1. 사파리

-쿠키,스토리지-

웹속성보기 - 리소스 - 로컬/세션공간, 쿠키 탭 확인

사파리에서 반응형 보는 법

사파리 -> 개발자용 -> 응답형 디자인 모드 시작

css부분에서 순서가 의미하는 것

css는 인라인이 가장 순서면에서 앞서지만 유지보수가 어렵다. 그렇기에 css 파일을 만든다.

user agent sheet이란

브라우저마다 default로 기본적으로 잡혀있는 css를 말한다.
이게 무슨 말이냐 하면 ie에서 개발을 한뒤 코드를 크롬이나 사파리로 옮겼을 때 그 브라우저마다 기본적인 css가 다르기 때문에 조금씩 수정을 필요로 한다.
이처럼 브라우저마다 default로 기본적으로 잡혀있는 css가 바로 user agent sheet인 것이다.

hover했을때 css적용법

hover가 무엇이냐면 마우스가 올라갔을 때 어떠한 스타일이 적용 되는 것이다. 이는 개발자도구에서 코드를 통해 바꾸어줄 수 있다.

css 속성값 100% 지정되어 있는 요소 들 찾기

style 탭의 filter에 검색을 하면 손쉽게 요소들을 찾을 수 있다.

header에 있는 로고 요소 복사해서 footer에 추가 해보기

코드를 마우스 드래그를 통해 header에 있는 로고 요소를 복사에서 footer로 보내줄 수 있을 것이다.

리프레시를 해도 콘솔이 지워지지 않고 남게 하는 법

우측 상단에 점 세개의 setting을 들어가서 network에서 preserve log를 눌러주면 된다.

console.log , error , dir 의 차이

log -> 말 그대로 콘솔에 나타내줌
error -> 에러 메세지를 보여달라고 하는 것.
warn -> 경고 메세지를 보여달라고 하는 것.
dir -> 내가 원하는 요소의 정보를 객체 형태로 보여달라.

콘솔에서 warn은 빼고 콘솔 보는 법

상단의 fiter 쪽에서 옆부분에서 설정

모든 탭에서 콘솔창 같이 보는 법

esc를 활용하면 손쉽게 콘솔 창을 늘릴 수 있다.

profile
BackEnd-Developer

0개의 댓글