Chrome Dev Tool(크롬 개발자 도구)
크롬 개발자도구 소소한 기능 8개를 보고 정리한 내용입니다.
1. ⭐️Devtools Screenshot(개발자용 스크린샷)
cmd
+shift
+P
-screenshot
(area, full, node 등)
2. ⭐️Coverage
cmd
+shift
+P
-coverage
- Show coverage - reload - usage visualization해당페이지 렌더링에 사용중인 CSS, JS 파일 정보를 알 수 있다(메인페이지 로딩 최적화)
CSS, JS 파일 중 현재 페이지에 불필요한 코드를 비율과 색깔(빨강색)로 보여준다
3. ⭐️FPS meter
cmd
+shift
+P
- Show frames per seconds(FPS) meterFPS(Frames-per-second) 는 초당 프레임 수를 의미하며, FPS meter는 GPU에서 사용하는 메모리양 을 표시한다.
4. Sensor
cmd
+shift
+P
- Show sensorsGyroscope(자이로스코프), Accelerometer(가속도계), GravitySensor(중력센서) 등 모바일에 내장된 센서를 브라우저에서 테스트할 수 있다.
5. ⭐️Code Editor
Sources - Filesystem -- Add folder to workspace
개발자 도구에서 로컬 파일 수정 가능한 코드 에디터이다.
Elements(Live server 로 오픈 시) 또는 Sources 탭에서 코드 바로 고칠 수 있다.
6. Live Expression
Console - 👁(Create live expression)
Enter 키 없이 콘솔에서 연산 결과를 빠르게 확인할 수 있다.
7. Snippets
cmd
+shift
+P
- Show Snippets여러 줄의 긴 코드는 Sources - Snippets 탭에서 실행해볼 수 있다.
8. Ad Block
cmd
+shift
+P
- Block ads on this site(Network)광고가 제거된 버전의 사이트를 확인해볼 수 있다.
Last updated