TIL Chrome 개발자 도구

Inah-_-·2021년 2월 19일
0

WEB

목록 보기
2/10
post-thumbnail

🙆‍♂️🙋‍♀️ Team Mission

🥨 프레즐팀 - Console panel

  • Console 패널의 기능은?
  • 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?
  • 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
  • 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?
  • 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?

Material



# 개발자 도구란?

웹 사이트 오류 발생시 빠른 수정과 원인 파악이 가능한 도구


Console


Console 패널의 기능

로그 된 메시지 보기와 JavaScript 실행의 두 가지 용도로 주요 사용

자바스크립트가 돌아가는 환경 그대로인 부분으로써 개발 중 진단 정보를 남기고 페이지의 자바스크립트와 상호작용한다.

백엔드에서 보내주는 response(에러 메세지, status 코드)도 콘솔을 통해 확인 가능


새로고침시 Console의 내용이 지워지지 않는 법

개발자 도구 > Settings > Preserve log upon navigation 체크

  • Preserve log upon navigation 체크시 clear();코드가 작동하지 않는다.

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

  • Console에 clear()를 입력
  • command + k
  • 툴바 Clear console 아이콘 클릭
  • Ctrl+L (Mac, Windows, Linux)을 입력
  • Console 창 내부를 우클릭하고 Clear console 클릭
  • 자바스크립트 코드 내에서 console.clear()를 호출

Console에서 Warnigs, Errors 를 제외하고 보는 방법

  • 툴바의 Log level에서 해당 항목을 체크 해제

다른 Panel에서 Console Panel을 같이 보는 방법

  • 다른 패널 사용 중 Esc를 누른다.
  • Customize and control DevTools 버튼을 누른 다음 Show console drawer를 누른다.





Console 제외 주요 패널

Elements Pannel

  • 페이지와 스타일 검사 및 편집
  • CSS 스타일 수정
  • 페이지의 이미지 확장자 (Gif, Jpg, Png...) 확인 가능
  • 원하는 특정 요소의 이미지를 가져오고 싶을 때
    - Select an element

Sources

  • 자바스크립트 디버깅
    - 어떤 에러가 났을 때 문제가 무엇인지 파악을 하고 수정하는 것을 '디버깅'이라고 한다.
    • 디버거를 걸어 한줄, 한줄 자바스크립트가 돌아가는 것을 볼 수 있다.
  • 개발자의 코드가 브라우저에 전부 노출되어 정보를 가진
  • 코드를 압축, 난독화하여 브라우저에 올린다.
    - 그대로 올라와있는 사이트도 있다. ex) taling

Network Pannel

  • 웹 사이트에서 호출되는 css, javascript, img 등의 정보를 확인할 수 있다.
  • 'XHR' 프론트엔드, 백엔드에서 어떤 API에서 문제가 있는지 볼 수 있다.
  • http 네트워크 통신 확인, 웹 사이트 속도 측정에도 쓰인다.
  • 어떤 파일의 용량을 확인할 수 있다.

Application Pannel

  • 브라우저의 저장소
  • Local storage, Session Storage, Cookie
  • Local storage
    사용자가 지우지 않는 이상 계속 브라우저에 남아 있다.
  • Session Storage
    윈도우나 브라우저 탭을 닫을 경우 삭제된다.
  • Cookie

Performance, Memory

  • 어떤 사이트의 퍼포먼스를 확인
  • 어느 부분에서 버벅임이 있는지 어떤 파일이 문제인지 알 수 있다.
  • 요새는 브라우저 성능이 좋아져 특정한 비즈니스가 아닌 이상 잘 안 본다.
profile
Backend Developer

0개의 댓글