1.Elements

-html의 태그의 각각의 요소들 (dom 요소)



한 dom 에 2가지의 css가 적용되있지만

우선순위에 따라서 적용 안된 css 는 저렇게 줄이 그어져있다.



DOM 구조를 브레이크 포인트로 넣을때(변경됫을때,하위DOM이 변경될때,삭제됫을떄) 브레이크가 된다

2.Console

-스크립트 기능을 콘솔에 입력해서 사용할수있다

-웹페이지 에서 일어나는 에러라든것도 표시해서 알려준다

3.Sources

-페이지의 소스들을 볼수잇고 수정도 할수 있는 페이지 (저장을해도 클라이언트에서 저장이될뿐)

F10 : 소스를 한줄 한줄 실행한다 (Step over next function call)

F11: 현재 속해있는 함수의 안으로 들어간다(Step into next function call)

Shift + F11 : 함수안으로 들어간걸 빠져나온다.

F8 : 다음 브레이크 포인트까지 이동한다



AJAX (XHR) 의 브레이크포인트를 걸고싶을때 저기에 +버튼을 누른뒤 URL을 입력한다

그럼 그로직을 디버깅 할수 있다. 아무것도 입력하지 않으면

모든 AJAX 통신을 디버깅한다

Event Listener Breakpoints 는 페이지의 이벤트가 발생됫을때 브레이크 포인트를 걸수있다.

Pause on exceptions(검은일시정지버튼) 을 누르면 예외상황이 발생햇을때 브레이크포인트를 걸 수 있다.

4.Memory

5.Security

6.Audits

-영어로 감사하다 웹페이지의 상태를 감사 성능에 악영향을 끼칠수 있는걸 찾아내서 알려준다

RUN 을 누르면 합치는게 좋겟다 이건 네트워크 용량이 너무 많다

이런건 압축했으면 좋겟다 라는 걸 찾아서 알려준다

7.Performance

- 프로그램 서비스의 성능을 측정한다 얼마나 많은 메모리를 사용하나 , 로딩되는데 소요되는 시간이 얼마나걸리냐

8.Network

-네트워크를 로드하면서 네트워크에서 가져온 Resources(자원) 들이 어떻게 들어오고 어떤요청으로오고

용량은 얼마나 되는지 리소스 자원들의 시간은 얼마나걸리는지에 대한 페이지가 표시



빨간동그라미: 웹페이지 로딩후 다른데로 갔을떄 내역을 삭제하는게 아니라 새로 추가되서 보여준다

엑박동그라미 : 내역을 삭제한다

all / xhr /js /css img /media 등은 각각의 타입에 맞는 로딩된 데이터만 보여준다 (정렬기능?)

xhr 은 ajax 통신한 데이터만 보여준다는 뜻이다

9.Application


'프로그래밍 툴 > 크롬개발자도구' 카테고리의 다른 글

크롬개발자도구 설명글  (2) 2019.02.28
  1. 조쿠 2020.04.07 14:37

    잘 보고 갑니다~~~

  2. 방장 2020.04.07 15:11

    이제 하산하세요

+ Recent posts