#개발자 도구

노션 :: we-code / ETC / 세션 / 개발자 도구

개발자 도구 설명

# 개발자 도구 여는 법

• 크롬에서 개발자 도구 여는 방법 
  : option + command + i
• 사파리에서 개발자 도구 여는 방법
  : 사파리에서 page open -> command + , (환경설정) -> 고급 (톱니바퀴 모양) -> 맨 하단 메뉴 막대에서 개발자용 메뉴 보기
• ie에서 개발자 도구 여는 법 
  : F12 

 

#개발자 도구 패널 종류

DevTools

 

#저장소 종류

쿠키와 스토리지의 차이점은? 
: 크게는 데이터가 서버와 연동되냐 안되냐 이고, 마감기한이 있고 없고의 차이다.
쿠키는 용량이 작고 스토리지는 용량이 크다.

• 쿠키 
  : 서버와 연동되어 마감 기한이 있는 저장소 key, value형태이다. 매 http 요청마다 포함되어 api호출로 서버에 부담, 암호화의 개념 X = 유출 가능성 :: 이런 점을 보완하고자 web storage(로컬/세션)가 등장함
  ex) 팝업창에서 "오늘 하루 동안 보지 않기", "일주일 동안 보지 않기"
• 로컬 스토리지
  : 내가 의도적으로 지우지 않는 이상 삭제되지 않는 데이터 ex) 로그인 ID, PASSWORD 자동저장
• 세션 스토리지
  : 브라우저에서의 tap을 나가는 순간 삭제되는 일회용적인 데이터 ex) 장바구니에 담아둔 물건이 사라짐

HTML 웹 스토리지 기능과 예제 그리고 활용 방법

사이트 마다 로그인, 장바구니 등 저장되는 방법이 다르다. 모두 다 같진않으니 유의할 것!

 

#저장소에 데이터 저장 setItem / 삭제 removeItem / 값 가져오기 getItem

localStorage.setItem('iAm','gwonRan'); //key값은 iAm, value는 gwonRan
localStorage.removeItem('iAm'); //제거시에는 key값만 작성

console 패널에서 localStorage.setItem(key, value); 해주면 localStorage가 setting된다.

setting이후 Application패널에서 Local Storage 에서 값이 잘 들어가 있는지 확인하기

console 패널에서 localStorage.removeItem(key); 해주면 값이 삭제된다.

스토리지 접근해서 값 가져오기 .getItem(key);

 

#개발자 도구에서 API와의 통신

: network 패널은 서버와의 통신 내역을 보여주는 패널로, 항목이 어떻게 요청 되었는지, 어떤 응답을 받았는지 상세하게 확인 할 수 있다.
Api의 확인 방법은 Header] 탭에서 https://homeage link/뒤에 해당하는 곳 참고해서 해당 api 호출 경로를 확인.

 

#엔드포인트 대체 무엇? - 이해가 잘 안됌

: 원래 정해진 기본 주소에서 특정 데이터를 받기 위한 것. 엔드 포인트는 API가 서버의 자원에 액세스 할 수 있도록하는 URL

크롬 개발자 도구 다루기 #2편

 

# method | content-type 무엇?

• method
  : http 수업 때 제대로 배우겠지만, 외부에 있는 function(){}은 큰 개념으로 함수라고 하고 내부에 위치한 function(){}들은 method라고 한다. request Method  = http method 주어진 리소스에 수행하길 원하는 행동
• content-type
  : 클라이언트에게 반환된 컨텐츠의 컨텐츠 유형을 알려줌

Content-Type

HTTP 요청 메서드

 

 

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

: 버전을 낮춰서 봐야하는 이유는 최신 버전이 아닌 낮은 버전을 사용하는 사용자가 여전히 많고 낮은 버전만 지원하는 사이트들도 많다. 반드시 익스플로의 모든 버전을 테스트 해봐야한다. 현재는 IE7,8버전이 가장 압도적.

익스플로어 open -> 개발자 도구 F12 -> 에뮬레이션 패널 -> 문서보기 -> 버전 수정

 

# 맥과 아이폰을 연결해서 맥에서 아이폰 사파리 개발자 도구

준비물 : 맥북과 iphone 그리고 그 둘을 연결할 수 있는 usb선

1. iphone 설정 - 사파리 - 제일 하단 고급 - 웹 속성을 활성화
2. iphone과 macbook 연결
3. iphone 사파리창을 열고 소스 보고싶은 페이지로 이동
4. macbook 사파리에서 개발자용으로 들어가면 내가 연결한 iphone 이 뜨는데 내가 원하는 링크 누르면 확인 가능

 

# 사파리와 ie에서 스토리지&쿠키 확인하기

mac 
: 사파리 open -> 사이트 접속 -> 개발자 도구 open -> 저장공간에서 확인 가능

window ie
: ie open -> 사이트 접속 -> 개발자 도구 open -> 네트워크 -> 아래 리스트들 중 하나 선택해서 오른쪽 창에서 쿠키 확인
: 콘솔 내 console.log(sessionstorage) / console.log(localstorage) 입력 - 스토리지 확인

 

#사파리에서 반응형 보는 법

: 사파리 열고 command + control + R (개발용 - 응답용 디자인 모드 시작)

 

 

# 개발자 도구의 element 패널에서의 CSS

#CSS부분에서 순서가 의미하는 것

: 우선 순위가 높은 것이 더 위에 tag < class < id < inline styling (html file에 style 요소)
참고 블로그에서 검색 (CSS 선택자 우선순위)

# User agent sheet

: 브라우저의 defalut값으로 각 브라우저 마다 기본값들이 다 다르다.
이 경우를 방지하기 위해서 reset.css를 link 해주면 된다.

# css속성 값이 100% 지정되어 있는 지 확인하기

: filter를 사용해서 찾으면 된다.

 

# 다른 요소에 있는 이미지, 기타 태그들 복사해서 다른 요소에 추가하기

: 태그 왼쪽에 ••• 가 있는데 그것을 눌리면 저렇게 옵션들이 뜬다. 붙여넣기와 카피 가능
이 외의 방법으로는 command + c 해서 내가 붙이고 싶은 곳에 command + v 하면 된다. 

 

# 3초에 한번씩 페이지를 강제 리로드 되게 하세요

setInterval(location.reload(),3000);

: 실제 자바스크립트 파일에 넣어야한다. 시간은 초단위로 넣어야하기에 1000*3해서 3초이다.

 

# 현재 시간을 콘솔에 나타나게 하세요

: Date()

 

# refresh 해도 콘솔이 지워지지 않고 남게 하시오

 

# console.log err | warn | dir차이

• err : 코드가 돌아가지 않는 에러의 단계
• warn : 코드는 돌아가긴 하는 에러의 단계
• dir : dom 객체 안에 있는 키, 값을 보고싶을 때

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

 

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

: esc 누르면 console 뜬다.

 

❗️자바스크립트를 사용할 때는 console을 계속 확인해야한다.