DevTools 어디까지 활용할 수 있을까?
Ctrl + []
탭 이동 Ctrl + L
console clearesc
Drawer open & close F1
open settingCtrl + Shift + P
[Sources]
Sources > FileSystem 에서 작업 폴더 오픈 하여 바로 작성 가능(에디터 기능)
Sources > Overrides 에서 개발자도구에서 수정한 코드 바로 저장
가끔 뭐가 적용된건지 헷갈리니까 유의해서 사용해야 함.
[Console]
[Element]
에서 클릭한 순서대로 (클릭하면 옆에 뜨는 숫자 있음) dom selecting 가능...(왕신기)node 선택하고 우클릭하면 DOM 에 Breakpoint를 걸 수 있음.
어디서 DOM이 바뀌는지 알 수 없을 때 활용하면 좋음.
[coverage]
해당 페이지 렌더링에 필요한 CSS와 JS의 코드 활용도를 파악할 수 있다.
-> 리팩토링 단서를 분석하여 성능을 향상할 수 있다. (FCP 향상 근거)
- 빨간색 - 안씀
- 파란색 - 씀
[Rendering]
performance 탭과 함께 활용하면 더 좋음.
CRP 에서 repaint하는 부분... 이거 브라우저마다 css 속성 특징 다를 수 있어서 크로스 브라우징 필요한 작업에서는 맹신하기 어려움.
[Components]
이거 체크하면 렌더링 빈도수 마다 색상 달라짐 -> 빨간색에 가까울수록 성능 개선 필요하다는 뜻.
Block ads on this site ...ㅇㅅㅇ