크롬 개발자도구
-
목차
Elements > Break on
- attribute modifications : 속성이 변경되면 Break On
- node removal : node 삭제될 경우 Break On
- subtree modifications : 하위 element 변경되면 Break On
- Dom break debug
Elements > Properties
- Dom 의 어떤 속성을 가지고 있는 지 확인 가능
Elements > Event Listeners
- Dom 에 걸려 있는 이벤트 확인 가능
Console > Console Utilities API Reference
Console > Console Setting > Preserve log
- 새로 고침등으로 화면 전환시에도 로그를 그대로 남기기
Console > monitorEvents
- monitorEvents(document.body, “click”)
Sources > Event Listener Breakpoints > Control > submit
Sources > Pause on Exceptions (중지 아이콘)
- Exception 이 발생할경우 Pause
Sources > Breakpoints > Edit BreakPoint
- Break Point 조건문 작성 가능
Sources > Event Listener Breakpoints
- mouse > click
Sources > Pretty Print landing
- Source formatting
Sources > XHR/fetch Breakpoinss
- 특정 url Pause
- Any XHR or fetch : 모든 통신에 break on
Sources > Local > Store as global variable
- 글로벌 변수에 자동으로 저장
Settiong > Blackboxing
- Debug Skip
- /.jquery..js$
Snippets
- 자주 사용하는 코드나 스크립트 저장
Network > Setting > Capture screenshots
- 구간 저장
Performance
- Record
- Cntr + Shift + P 추가 기능 선택 가능
Memory
Application
- Storage
- Frames
Security
Lighthouse
- 구글이 만든 성능측정 라이브러리
Remote Debugging
- Android os Phone USB 원격 디버깅
