3.크롬 개발자도구 기본편

기록용으로 대충 씀

1.Settings 패널

1)테마

2)소스 열었을 때 자동으로 네비게이터 보여줌 

3)새로고침시에 캐시 X

4)로그 좌측에 발생한 시간 표시

2.Elements 패널

1)도구패널의 Computed : 최종 적용된 styles

2)hover 상태에만 보여지는 부분을 기본으로 보이도록 상태변경 가능

해당 엘리먼트 선택 후 오른쪽 '도구패널' 에서 Styles -> :hov 눌러서 설정

:active 클릭했을 때

:hover 마우스 오버했을 때

:visited 방문 후

3)Elements 에서 F12누르면 Edit as HTML 

4)원하는 엘리먼트에 Break on 에서 감지를 걸면 해당 엘리먼트가 변경될 때를 소스에서 알 수있음

5)엘리먼트에 바인드된 이벤트를 찾으려면 해당 엘리먼트누르고 도구패널에서 Event Listeners -> 해당 이벤트 눌러서 소스 확인 가능

Ancestors : 해당 엘리먼트의 상위 엘리먼트에 바인드된 이벤트 모두 표시

3.Console 패널

1)shift+enter 누르면 콘솔에서 개행

2)로그레벨 선택 가능

4.Sources 패널

1)ctrl+p 누르면 전체에서 소스파일 찾기

2)디버그 도구에서 일시정지 모양 누르면 exception 걸렸을때 pause함

3)esc 누르면 콘솔 뜸

4)ctrl+shift+f 누르면 전체 소스에서 특정 문자열 찾기

5)Snippets을 사용하면 긴 코드를 작성할 수 있음

5.Network 패널

1)XHR 호출 : API 호출

2)Disable cache : cache를 사용하지 X

3)각각의 호출된 파일들의 Headers,Preview/Timing/Cookies등 확인 가능

4)offline 선택 시 네트워크 연결 X

참고 : https://tmondev.blog.me/221158360917