hmu332233
commented
3 years ago 2020 NHN FORWARD
새롭게 알게되었거나 기록하고 싶은 것들을 기록했다.
천천히 읽어보는 Chrome 개발자 도구 설명서
https://www.youtube.com/watch?time_continue=480&v=cAIo4dEEPuc&feature=emb_logo
Elements
-
클릭한 Node를 최슨 클릭 순서대로 저장
-
$0~$4로 Console에서 접근 가능 -
DOM Breakspoints 서브탭
- break point를 on/off하거나 우클릭으로 삭제 가능
-
Event Listeners
- 현재 문서에 Bind된 Event Listener들 보여줌
- Linster 함수 위치로 Jump 가능
Console
- Live Expression 생성 버튼 (눈모양 아이콘)
- 가벼운 디버깅 용도로 간단한 표현식을 작성하고 실시간으로 검증할 때 사용
Sources
- Filesystem
- Local 파일 디렉토리 파일들을 불러오고, 수정한 내용 저장 가능
- IDE처럼 사용 할 수 있음
- overrides
- 개발자 도구에서 일어난 코드의 변경사항을 새로고침 이후에도 유지할 수 있도록 저장
- breakpoint
- Conditional Breakpoint
- 특정 조건일때만 breakpoint에서 중단되도록 설정 가능
- Logpoint
- 입력해둔 표현식의 결과를 콘솔에 출력해준다. (console.log를 안찍어도 될만한 상황이 자주 생길 수 있다)
- Blackbox Script
- 디버거에서 step을 건너뛰고 싶은 파일에서 멈췄을 경우
우클릭 - Blackbox script을 통해 해당 파일에서는 step이 멈추지 않게 된다. - XHR/fetch Breakpoints
- 특정 URL이 포함된 경우, XHR이나 fetch 요청을 보낼 때를 Breakpoint로 잡을 수 있음
Memory
- Heap snapshot
- 어떤 객체나 배열이 수거되지 않았는지 확인하고 싶을때
- 특정 함수나 이벤트 실행 전후로 비교하기 좋음
- Allocation instrucmentation on timeline
- 시간의 흐름에 따라 메모리 누수를 동적으로 확인하기 좋음
- Allocation sampling
- 메모리 공간을 할당한 Javascript 함수를 보여줌
Drawer
- 개발자 도구에서 ESC 눌럿을때 나오는 것
- Request blocking
- 특정 URL 요청 막기
- Rendering
- 다시 그려진 요소 확인
단축키
- CMD + Shift + C
- select element 단축키
slash21
프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
관련 키워드
- react suspense for data fetching
- react concurrent mode
- useTransition, useDeferredValue
Seach Keyword NHN, 토스