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