DevTools 어디까지 활용할 수 있을까?

references

• developer.chrome - UX Report, Chrome DevTools 확인.
• 남들 모르는 크롬 개발자도구 소소한 기능 8개 - 유쾌하고 명료.
• [NHN FORWARD 2020] 천천히 읽어 보는 Chrome 개발자 도구 설명서 - 서론이 조금 긴편이지만 좋은 취지를 알 수 있음.
• E02-3-React. 디버깅 방법, 정보를 얻는 방법 - React 디버깅 방법 가르쳐 줌. (설명해주시는 분이 velog.io 개발자님...ㅇㅁㅇ)

shortcuts (설정에서 변경 가능)

• Ctrl + [] 탭 이동
• Ctrl + L console clear
• esc Drawer open & close
• F1 open setting

setting 동기화 기능

---

At Work

1. 😎 Ctrl + Shift + P

• screenshot - 전체, node 등을 활용하면 목적별 캡쳐 이미지를 쉽고 빠르게 가져올 수 있다.

2. [Sources]

• Sources > FileSystem 에서 작업 폴더 오픈 하여 바로 작성 가능(에디터 기능)
  

• Sources > Overrides 에서 개발자도구에서 수정한 코드 바로 저장

가끔 뭐가 적용된건지 헷갈리니까 유의해서 사용해야 함.

• Sources > Snippet 에서 여러 줄 코드 작성 가능

debug

• Breakpoint의 종류 3가지
  
• debugger's ignore list
  라이브러리 등에 step 걸릴 때 해당 파일 무시하는 기능
  

3.[Console]

• Create live expression(눈모양) 으로 확인 및 작성이 용이하다.
  
• [Element] 에서 클릭한 순서대로 (클릭하면 옆에 뜨는 숫자 있음) dom selecting 가능...(왕신기)
  

4. Dom Breakpoint

node 선택하고 우클릭하면 DOM 에 Breakpoint를 걸 수 있음.
어디서 DOM이 바뀌는지 알 수 없을 때 활용하면 좋음.

---

In Analysis

1. [coverage]

해당 페이지 렌더링에 필요한 CSS와 JS의 코드 활용도를 파악할 수 있다.
-> 리팩토링 단서를 분석하여 성능을 향상할 수 있다. (FCP 향상 근거)

- 빨간색 - 안씀
- 파란색 - 씀

2. 🐧[Rendering]

FPS 마스터

performance 탭과 함께 활용하면 더 좋음.

CRP 에서 repaint하는 부분... 이거 브라우저마다 css 속성 특징 다를 수 있어서 크로스 브라우징 필요한 작업에서는 맹신하기 어려움.

3. 🌼 extensions - React devtools [Components]

이거 체크하면 렌더링 빈도수 마다 색상 달라짐 -> 빨간색에 가까울수록 성능 개선 필요하다는 뜻.

---

business

Block ads on this site ...ㅇㅅㅇ