Console의 기능들

Console의 기능들

Elements패널의 기능은?

html 코드를 분석하고 실시간으로 수정 할 수 있는 도구 패널

DOM과 CSS를 자유롭게 조작해서 사이트 레이아웃과 디자인을 테스트 할 수 있다.

특정 DOM에 변화에 BreakPoint를 걸 수 있다.

해당 페이지는 몇 개의 section 으로 이루어져있나요?

• 5개

Instagram 피드의 가로 길이는?

• 614px

Styles 부분의 순서가 의미하는 것은?

• 상단보다 하단에 위치한 스타일의 우선적용도가 높음.

user agent stylesheet 란?

• margin 값을 정해두지 않아서 브라우저 임의대로 설정 되어 있는 것
  결과물이 의도한 것과 조금 다를 수 있다.

Console 패널의 기능은?

• 로그를 확인하고 스크립트 명령어를 입력하는 패널
• 중단점을 건 시점의 변수를 체크 할 수 있고, 값을 평가하거나 수정 할 수 있다.
• 실시간으로 자바스크립트를 실행하고 에러메세지 등을 출력해준다.

화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?

• Console의 설정창을 들어가 맨 처음 탭인 Perferences - console -Preserver lpg upon navigation을 찾아서 체크하면 된다.

콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?

• clear() 또는 console.clear()

콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?

• console 탭 우상단 Default levels를 클릭해 Warnings와 Errors를 해제한다.

다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?

• 다른 패널에서 ESC를 누르면 하단 콘솔창을 스위칭 할 수 있다.

Network 패널의 기능은?

• 페이지를 표시하는데 필요한 네트워크 작업에 대한 결과를 시간 순으로 표시해주는 패널이다.
• 서버와의 통신 내역을 보여주는 패널로써 보이지 않는 리소스를 찾을 떄 사용한다.
• 특정 항목을 선택하여 해당 항목이 어떻게 요청되었는지, 어떤 응답을 받았는지를 상세하게 확인이 가능하다
• 서버에 어떤 헤더를 지정하여 요청했는지, 응답으로는 어떤 헤더를 받았는지 확인하여 네트워크 최적화를 진행하는데 좋다.

Network 패널의 여러 가지 탭의 종류와 기능 살펴보기

• XHR : 브라우저가 서버와 HTTP 통신을 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로부터 요청에 따른 Response 결과를 확인 할 때 사용된다
  페이지에서 사용되는 API를 여기서 확인 할 수 있다.
• JS , CSS :
• Img, Midea : 브라우저가 서버를 통해 받아오는 콘텐츠를 확인 할 수 있고 직접 그 URL을 통해 다운로드 할 수 있다. 클론코딩을 할 때 유용하다.

Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기

Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기

https://tesla-cdn.thron.com/static/ATD8WK_range-mobile.mp4-2000_PEAMQB.mp4?xseo=

Application 패널의 기능은?

• 현재 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람할 수 있는 패널
• 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.

Local Storage, Session Storage, Cookie 차이점은?

• Loacal Storage : 사용자가 데이터를 지우지 않는 이상 브라우저에 계속 남아있다.
  Key- Value 저장소이다.
  모든 데이터는 문자열로 변환된다. 객체 형식을 유지하며 보내려면 JSON으로 변환 필요
• Session Storage : 윈도우나 브라우저의 탭을 닫으면 제거된다.
• Cookie : 만료 기한이 있는 key-value 저장소이다.

Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?

• Local Storage : 지속적으로 필요한 데이터를 저장한다.
• Session Storage : 잠깐동안 필요한 데이터를 저장한다.
• Cookie : 웹 페이지 개인화, 임시 데이터 보관에 사용된다.

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

• localStorage.setItem(key, value)로 로컬스트리지에 저장
• localStorage.getItem(key)로 조회
• localStorage.removeItem(key)로 해당 키를 삭제
• localStorage.clear()로 전체 삭제