크롬 개발자 도구 (DevTools | Chrome)

ryuwisdom0_o·2020년 10월 24일
0

DevTools | Chrome

🖇 Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

▪️ 크롬을 이용하여 웹 개발 시 꼴 필요한 것 중 하나는 Chrome DevTools(크롬 개발자 도구)이다.
▪️ 디버깅 도구, 네트워크 상태 체크, 메모리, 보안, 퍼포먼스 체크 및 콘솔 등을 지원하는 강력한 개발 툴이다.

자주 사용하는 panel(tab)을 살펴보자.

1. Elements panel

Elements panel의 기능
  • 웹 페이지의 구성 (DOM)
  • 구성요소의 스타일 속성 (CSS)
  • CSS 수정, UI 수정 ...
Styles 부분의 순서가 의미하는 것은?
  • 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능
  • 가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서
  • cf) CSS Specificity - inline style > id > class > tag
user agent stylesheet 란?
  • 브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름.
  • Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서 reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능

2. Console panel

Console 패널의 기능
  • 자바스크립트 코드 즉시 실행
  • 디버깅
console 객체
  • console은 객체!
  • console 객체에는 log 메소드를 포함한 다양한 메소드가 존재합니다.
  • 참고) console | MDN
console.log() 실제 활용 예시
  • 프론트엔드의 경우 실제로 디버깅 시 다른 도구를 사용하는 것보다 console.log 를 활용하는 경우가 대부분입니다.
  • 백엔드에서 보내주는 response(ex. 에러 메세지, status 코드)도 아래 예시와 같이 console.log를 활용해 확인 가능합니다.
  • 그렇기 때문에 백엔드에서는 상황을 명확하게 알려주는 response 메세지와 적절한 status code를 전달하는 것이 중요합니다!

// 백엔드 API와 통신하는 fetch 함수
fetch('http://localhost:8000/login/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
'id': 'kim',
'password': '1234'
})
})
.then(response => response.json())
.then(response => {
console.log(response) // 백엔드에서 보내준 response를 console.log를 통해 먼저 확인

// 예시 1) token이 있는 경우
if (response.token) {
localStorage.setItem('wtw-token', response.token);
}

// 예시 2) message가 있는 경우
if (response.message === "valid user"){
	alert("로그인에 성공하셨습니다")
}

})


### 3. Network panel
##### `Network` 패널의 기능

- http 네트워크 통신 확인
- API 크롤링, 페이지 로딩 성능 테스트
- 이미지, 영상 등의 소스 (mock data 활용)

##### 내부 살펴보기

- All, XHR, JS, CSS, Img, Media ...

### 4. Application panel
##### `Application` 패널의 기능

- 브라우저 저장소
- Local storage, Session Storage, Cookie

##### **Local Storage, Session Storage, Cookie 차이점**

![](https://miro.medium.com/max/1400/1*O70Ml_4EqDa7i3uV0dlK1A.png)

- **Storage** **:** 브라우저의 저장소
- **Local Storage** **:** 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
- **Session Storage** **:** 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.
- **Cookie** **:** 만료 기한이 있는 저장소. 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분).

##### **Local Storage, Session Storage, Cookie  활용 예시**

:: **어떤 데이터를 어디에 저장하면 좋을까?**

- **Local Storage** 
- 지속적으로 필요한 데이터(**data persistant**)(ex. 자동 로그인 여부)
- UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
- **Session Storage** :  
- 잠깐 동안 필요한 정보
- ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택
- **Cookie** 
- 서비스 직접적이지 않은 데이터
- 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

❗️ 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험합니다. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문입니다. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리합니다.

##### Local Storage 에 특정 데이터를 저장하고 가져오는 방법

- 데이터 저장
    - `localStorage.setItem("key", "value")`
    - `sessionStorage.setItem("key", "value")`
    - `setcookie("key", "value", "지속시간 (초단위)")`
- 데이터 호출
    - `localStorage.getItem("key")`
    - `sessionStorage.getItem("key")`
    - `document.cookie`
- 기타 메소드
    - 외에도 `removeItem`, `clear` 등등의 공통 메소드 존재
profile
Ryuwisdom

0개의 댓글