💾 개발자 도구(DevTools)란?
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.
- 개발자 도구는 브라우저에 제공하는 하나의 도구(tool)입니다.
(Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc) - 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와줍니다.
🍩 Elements panel
1. Elements 패널의 기능은?
- 웹 페이지의 구성(DOM)
- 구성요소의 스타일 속성(CSS)
- CSS수정, UI 수정
💡 HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널입니다.
💡 DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있습니다.
💡 변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인 할 수 있습니다.
2. Styles 부분의 순서가 의미하는 것은?
- 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능
- 가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서
- cf)
CSS Specificity- inline style > id > class > tag
3. user agent stylesheet 란?
- 브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름.
- Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서
reset.css혹은normalize.css파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작 >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능
🥨 Console panel
1. Console 패널의 기능은?
- 자바스크립트 코드 즉시 실행 : 콘솔창에서 JS로 이루어진 코드를 즉시 실행하여, 그 결과를 테스팅 하는 것이 가능
- 디버깅 : 실행한 코드에 대한 버그 여부를 판단하여 기대한 코드의 정상 작동을 확인하는 작업, 즉 코드에서 버그를 제거하는 것
2. 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?
console 오른쪽 상단위 톱니바퀴를 누르면 옵션을 볼 수 있습니다. 주로 사용하는 기능은 다음과 같다. 큰 톱니 바퀴는 개발자 도구 자체의 모든 설정에 대한 옵션이며, 작은 톱니 바퀴는 console 창에 대한 국부 옵션입니다.
- Hide network: 404 또는 500 오류 등은 보여주지 않는다.
- Log XMLHttpRequst: XML Request를 기록
- Preserve log: refresh나 탐색하는 동안 log기록을 유지
- Show timestamps: log행 마다 timestamp를 보여 준다.
3. 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
- console.clear()
콘솔의 내용을 지웁니다.
4. 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?
5. 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?
6. console 오브젝트
- 주요 사용 메서드
- console.table() (en-US)
표 형태의 데이터를 표에 그립니다.
- console.group()
새로운 인라인 그룹을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그룹을 나오려면 groupEnd()를 호출하세요. - console.groupEnd() (en-US)
현재 인라인 그룹을 나옵니다.
- console.dir() (en-US)
주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시합니다. 속성 값이 다른 객체라면 펼쳐서 살펴볼 수 있습니다. - console.dirxml() (en-US)
객체를 XML/HTML 요소 형태로 나타낼 수 있으면 그렇게 표시하고, 아닐 경우 JavaScript 객체 형태로 표시합니다.
- console.time()
주어진 이름의 타이머를 실행합니다. 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다. - console.timeEnd()
지정한 타이머를 멈추고, 소요시간을 출력합니다.
- console.assert()
첫 번째 매개변수가 false인 경우 메시지와 스택 추적을 출력합니다.
- console.trace()
스택 추적을 출력합니다.
- console.table() (en-US)
🥖 Network panel
1. Network 패널의 기능
해당 웹사이트에서 통신하고 있는 모든 정보가 표시됩니다.(백-프론트사이 의 관계, 프론트와 유저사이의 관계) 네트워크 패널에는 서버 전체의 네트워크 활용에 대한 통계가 표시되고, 통계는 각각 구성된 가상 네트워크 디바이스에 대해 포트별로 정렬합니다.
얼마나 많은 시간이 걸리는지, 어떤 순서로 리소스를 가져오는지, 어떤 요청과 응답이 오고가는지 등, 웹페이지와 서버 사이에서의 데이터의 흐름을 분석하고, 문제 발생 시 해결책을 찾을 수 있는 곳 입니다.
- http 네트워크 통신 확인
- API 크롤링, 페이지 로딩 성능 테스트
- 이미지, 영상 등의 소스 (mock data 활용)
👉🏻 무슨 요청으로 호출했고 응답은 어떻게 되고 있는지 확인가능.
2. Network 패널의 탭의 종류와 기능 살펴보기
-
Filmstrip : 그래프. 타임라인형태로 어떠한 데이터가 어떤 순서로 로드 됐는지 표시되는 곳
-
XHR = 브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용합니다. API이며 프로그램들이 서로 상호작용하는 것을 도와주는 매개체이자 접근성을 허용할지 말지 확인하는 것입니다.
-
Name : 리소스의 이름과 URL
-
Status : 작동 여부를 숫자로 표시하여 오류를 확인 할 수 있는 곳
ex. 200 : 정상작동 / 304 : Not modified 등 -
Type : 파일의 형식 (.html / .js 등의 형식)을 볼 수 있는 곳
-
Initiator : 시작 지점을 의미하며, '(Initiator)에서 호출 됐다'의 의미
-
Size : 각 리소스들의 파일 사이즈
-
Time : 웹페이지(클라이언트)가 요청하고, 서버가 응답하는 것 까지의 걸린 시간 총합
-
Waterfall : 타임라인의 시간 소요의 세부 정보를 알려주는 곳
- DOMContentLoaded : 이미지 최 하단에 위치한 값으로, Waterfall에서 파란색 선으로 표시가 됩니다. DOM Tree 구조를 그리는데 걸리는 시간을 나타냅니다.
- Load : DOMContentLoaded 옆에 위치한 값으로 Waterfall에서 빨간색 선으로 표시가 됩니다. DOM Tree 구조를 포함, 이미지까지 화면에 로드되는 시간을 나타냅니다.
❈ 사용자가 느끼기에 이 서비스가 빠르냐 안빠르냐를 판단하는 기준중에서 가장 기본이 되는게 바로 저 두 지점이기 때문에 프론트엔드 개발자에게는 중요한 지표이다!
🍰 Application panel
1. Application 패널의 기능은?
- 브라우저 저장소
- Local storage, Session Storage, Cookie
현재 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트, 데이터 등)를 열람할 수 있는 패널이다. 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사합니다.
2. Local Storage, Session Storage, Cookie 차이점은?
- Storage : 브라우저의 저장소
- Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
- Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.
- Cookie : 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.
3. Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
- Local Storage
지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지) - Session Storage :
잠깐 동안 필요한 정보
ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택 - Cookie
서비스 직접적이지 않은 데이터
오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.
❗️ 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험합니다. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문입니다. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리합니다.
4. Local Storage 에 특정 데이터를 저장하고 가져오는 방법
- 데이터 저장
localStorage.setItem("key", "value")sessionStorage.setItem("key", "value")setcookie("key", "value", "지속시간 (초단위)")
- 데이터 호출
localStorage.getItem("key")sessionStorage.getItem("key")document.cookie
- 기타 메소드
- 외에도
removeItem,clear등등의 공통 메소드 존재
- 외에도
