[개발지식] 개발자 도구 / TIL # 25

velg·2021년 9월 4일
TIL개발지식
0

개발지식

목록 보기
1/7

개발자 도구에 대해 알아보자

개발자 도구

브라우저에서 개발자를 위해 제공하는 기능으로 mac기준cmd + shift + c를 누를 경우 화면에 짠! 하고 나타난다
개발자 도구로는 현재 웹 페이지에 대한 다양한 정보를 확인 할 수 있도록 돕기 때문에 개발자에게 필수적인 기능이라고 할 수 있다
그럼 개발자 도구에 어떤 패널들이 있는지 그리고 어떤 기능을 제공하는지 알아보자
(글은 크롬을 기준으로 작성하였다)

Elements

Elements 패널에서는 웹 페이지의 레이아웃과 디자인을 확인하며 실시간으로 수정 후 테스트 할 수 있다
기본적으로 왼쪽에 html문서가 표시되며 문서에서 포커스 되어 있는 요소에 대한 정보가 우측 섹션에 표시 된다

🚀 좌측상단끝의 Select 아이콘을 사용하면 페이지의 한 부분을 직접 클릭하여 html문서에서 포커스된 요소를 -> 클릭한 요소로 변경 할 수 있다.
실제 페이지를 통해 해당 부분을 찾을 수 있어 편하다!

이미지 가져오기

html문서에서 src부분을 가져와 해당 페이지 url에 붙이면 가져올 수 있다

user agent stylesheet?

브라우저의 기본 스타일 값을 말하며 브라우저마다 다른 스타일 값을 가지고 있다
이 말은 사용자가 어떤 브라우저를 사용하냐에 따라서 만든 페이지의 스타일이 달라질 수 있다는 것이다
때문에 reset.css를 통해 스타일을 초기화 시키고 작업을 진행해야 한다

관련 페이지 - https://meyerweb.com/eric/tools/css/reset
아래 코드를 긁어다 reset.css파일을 만들고 적용하면 된다!

Console

Console 패널에서는 자바 스크립트 코드를 즉시 실행 및 디버깅이 가능하다
보통 작성한 JS문서의 오류를 확인 할 때 사용한다

Sources

Sources 패널에서는 디버깅 소스를 확인할 수 있으며 디버깅에 도움이 되는 기능들을 제공해준다

Breakpoints

가장 우측 목록을 확인해보면 쓰레드, 스코프등과 함께 종류에 따른 중단점을 확인할 수 있는 기능을 제공하는 섹션이 있다
이중에서도 Event Linsener Breakpoints에서 다양한 이벤트들(key, mouse ...)을 확인 할 수 있다

사용 시에 페이지 상단에서 아래와 같은 도구창이 나오는데
Breakpoint-image
왼쪽 파란버튼이 다음 중단점까지 이동이고 우측 버튼이 한 줄씩 디버깅이다

Snippets

소스 목록의 탭을 확인해보면 Snippets라는게 있는데 여기에 다양한 라이브러리를 추가해 console에서 사용할 수 있다
(문자열, 객체 등을 다루는데 도움을 주는 라이브러리등을 다운 받고 Console창에서 사용하기 위한 기능 같다)

Network

네트워크 패널은 서버와 클라간에 주고 받은 모든 통신을 확인 할 수 있다

Capture screenshots

우측 상단의 설정에 들어가면 Capture screenshots라는 옵션이 있는데 체크한 후 새로고침하면 순서에 따라 해당 웹 페이지가 렌더링 되는 스크린샷이 표시된다

리소스 목록

Name ~ Waterfall까지 나뉘어 있는 섹션으로 리소스들을 확인 할 수 있다
각 리소스 요청이 테이블 데이터 형태로 노출되며, 캐시에서 가져온 리소스는 Size에 별도로 표시된다

각 탭의 내용을 알아보자

  • Name : 리소스 이름과 URL

  • Status : HTTP 응답 상태를 나타낸다
    HTTP 응답 상태는 세자리 숫자로 표시되며 첫번 째 자리수에 따라 종류 분류되며, 숫자마다 의미가 다르다
    - 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
    - 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
    - 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
    - 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
    - 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.
    이 중에서도 4, 5 는 오류 상황이기 때문에 발생시 조치가 필요하다

  • Type : 해당 리소스의 타입을 표시

  • Initiator : 시작지점을 의미

  • Size : 리소스 크기

  • Time : 서버 응답시간

  • Waterfall : 타임라인의 세부 정보 표시. 컬럼의 파랑, 빨강선은
    DCL(DOMContentLoaded Timing), Load Timing 타이밍을 표시

상태표시줄

순서대로 다음과 같은 내용을 표시한다

  • 전체 요청의 개수
  • 전송된 용량
  • 리소스의 용량
  • 리소스 로드에 걸린 시간
  • DCL(DOMContentLoaded Timing)
  • Load Timing

Performance

Performance 패널은 자바 스크립트가 느리거나 성능 비교가 필요할 때 사용한다
문구에 따라 녹화를 진행하고 끝나면 결과창이 짠~✨ 하고 뜬다

Show Performance Monitor

맥 기준 cmd + shift + p를 눌러보면 검색창이 뜨는데 여기에 Show Performance Monitor를 검색하고 실행하면 실시간으로 성능을 확인 할 수 있는 창이 뜬다

Memory

Memory 패널에서는 자세히 메모리 사용량에 대해서 알 수 있다
프로파일링 타입을 선택하고 실행한 후에 결과창이 나오는데 여기서 어느 부분이 메모리를 얼마나 잡아 먹는지를 확인 할 수 있다

Application

Application 패널에서는 로컬 스토리지, 섹션 스토리지, 쿠키 등을 확인 할 수 있다

정리하다보니..
무작정 내용을 정리하기보단 직접 사용하며 필요성을 느꼈을 때 공부하고 정리해야겠다는 생각이 들었다
아직 elements나 console 패널 정도만 조금씩 이용하고 있지만 언젠가 저 많은 패널과 기능들을 정복하는 날이 오길 바란다

코딩고양이

끝.

profile
velg
초보 개발자
다음 포스트

[개발지식] VScode 기능 / TIL # 26

0개의 댓글

관련 채용 정보