개발자 도구를 여는 방법
- 마우스 오른쪽 버튼을 눌러 '검사' 버튼
- 크롬에서 Command/Ctrl + Shift + C 단축키 사용
- 단축키 F12
Elements panel
- 웹 페이지의 구성 요소(HTML, CSS 요소)들을 확인할 수 있는 패널
- 실제 적용되어 있는 코드들을 확인하고, 실제 웹페이지 데이터에는 영향을 주지 않으면서 요소들을 직접 조작해서 CSS요소 등을 변경하고 적용해볼 수 있다.
- 특히 FE에서 많이 사용하는 panel이며, 실시간으로 구성 요소들의 변화를 확인할 수 있어 실무에서 PM-디자이너-개발자 간의 소통 시에도 자주 사용되는 패널
Console panel
- Console 패널은 Javascript를 조작할 수 있는 패널
- Console 패널에서는 실제 웹 페이지에 적용되어 있는 코드는 조작할 수는 없으나, 콘솔창에 코드를 쳐서 웹 브라우저를 조작할 수 있다.
- Javascript 파일에서처럼 변수 선언, 함수 생성, alert 이벤트 추가 등이 가능한 패널
- Console 패널도 프론트엔드 개발자가 가장 많이 사용하는 패널로, 서버에서 받아오는 데이터가 잘 들어오는지, 의도대로 기능이 구현되는지 등을 확인할 때 사용할 수 있다.
- 개발자 도구는 정말 개발자들만 사용하고 열어본다는 특징을 이용하여, 다른 개발자들이 볼 수 있는 메시지가 작성되어 있는 등 개발자를 위한 공간으로도 활용되는 패널
[MDN] Console API reference 중
1. console.log ('log');
: 'Prints a message to the Console.'
- 변수, 텍스트, 숫자, 함수 등 다양한 값을 넣고 Console 패널에서 확인하는 API
- console.clear( );
: 'Clears the console.'
: 'If Preserve Log is enabled, console.clear() is disabled.'
- 콘솔에 기록된 로그들을 모두 지울 때 사용하는 API
- Preserve Log 설정이 되어 있는 경우에는 console.clear();를 실행할 수 없다.
- Preserve log 활성화하는 방법: "관리자도구 > 설정 > Preferences > Console> ‘Preserve log upon navigation’" 활성화
- 다른 패널에서 ESC키 누르면 Console 패널을 같이 사용할 수 있다.
Network panel
- 클라이언트와 서버 간에 발생하는 통신의 정보를 확인할 수 있는 패널로, 프론트엔드, 백엔드 개발자가 모두 많이 사용하는 패널
- 클라이언트가 네트워크 요청을 하고 받는 응답 내용을 확인할 수 있고, 데이터, 이미지, 동영상 등 형식별로 주고 받는 데이터를 구분하여 확인할 수 있다.
ex. Fetch/XHR 탭 - 데이터 요청을 하고 전달받는 데이터를 확인 - 통신 과정에서 에러가 발생했을 경우에 'status code'를 통해 어떤 에러인지 확인할 수 있다.
ex. 200번대 코드 - 통신 성공 코드, 400번대 코드 - 주로 클라이언트 측의 원인, 500번대 코드는 주로 서버 측의 원인
Application panel
- 브라우저의 저장소에 저장된 데이터를 확인할 수 있는 패널
- 브라우저 저장소에는 크게 Local Storage, Session Storage, Cookies가 있으며, 각 저장소 특징에 따라 다른 기능을 구현하는데 사용할 수 있다.
- 다만, 데이터가 클라이언트 측에 저장되어 쉽게 해킹 될 수 있고 JavaScript을 통해 쉽게 조작이 가능하기 때문에 민감한 정보나 보안상 이슈가 있는 정보를 저장하기에는 적합하지 않다.
- 저장소 특징에 따라 사용되는 상황이 다르며, 같은 기능에 대해서도 사이트/서비스의 특성, 회사의 방침 등에 따라 달라질 수 있다.
1) Local Storage
- 세 가지 저장소 중 가장 용량(Capacity)이 큰 저장소(10mb)로, 저장된 데이터는 물리적으로나 코드로 제거하지 않은 한, 브라우저가 종료되어도 삭제되지 않는다.
- 이에 따라 자동 로그인 기능을 구현할 때 사용되기도 하는 저장소
- Local Storage에 데이터 저장: "localStorage.setItem("key", "value")"
- Local Storage의 데이터 호출: "localStorage.getItem("key")"
2) Session Storage
- Session Storage는 5mb 크기의 용량을 가지고 있으며, 브라우저가 종료되면 데이터도 함께 삭제되는 저장소
- Session Storage에 데이터 저장: "sessionStorage.setItem("key", "value")"
- Session Storage의 데이터 호출: "sessionStorage.getItem("key")"
3) Cookies
- 가장 작은 용량의 저장소(4kb)이며, 다른 저장소와 달리 브라우저에서 뿐만 아니라 서버에서도 사용 가능한 저장소
- 데이터 저장 시간에 대한 제한 설정이 가능해서, 브라우저가 종료 되더라도 데이터는 삭제되지 않고 설정한 시간이 만료되면 사라진다는 특징이 있다.
-> 이에 따라 오늘 하루 팝업 그만 보기와 같은 기능을 구현할 때 사용할 수 있다. - Cookie 데이터 설정: "setcookie("key", "value", "초 단위의 지속 시간")"
- 데이터를 호출: "document.cookie"
Hello World!