남들 모르는 크롬 개발자도구 소소한 기능 8개

https://www.youtube.com/watch?v=toXJLUa7i0Y 

 

 

Devtools Screenshot

: 개발자 도구 > Ctrl + Shift + p > screenshot 이라고 검색

 

 

Coverage

: 개발자 도구 > Ctrl + shift + p > coverage

: 페이지 렌더링에 사용되는 css 파일과 자바스크립트 파일을 보여줌

: CSS 파일 중 현재 페이지에 필요없는 코드를 %로 알려줌

 

 

FPS meter

: 개발자 도구 > Ctrl + shift + p > FPS meter

: 이 페이지가 몇 fps로 동작하는지 보여줌

 

 

Sensor 

: 개발자 도구 > Ctrl + shift + p > Sensor

: 가속도 센서, 자이로 센서 등의 기능을 브라우저에서 사용가능 (테스트)

 

 

Code Efitor

: 개발자 도구 > Sources > File System > + 버튼 > 폴더 열기

: 크롬에 내장된 에디터

: 바로바로 코드를 수정할 수 있음

 

 

Live Expression

: 개발자 도구 > Console > 눈 표시 아이콘

: 콘솔에서 입력한 코드가 페이지에 바로바로 반영 시킬 수 있음

 

 

Snippets

: 개발자 도구 > Ctrl + shift + p > snippets > new snippets

: Consle탭에서 코드 여러줄 쓰는 것이 불편할 때 사용

 

 

ad BLock 시뮬레이션

: 개발자 도구 > Ctrl + shift + p > ads 검색 > block ads on this .... > 엔터

: 광고가 제거된 버전을 미리 볼 수 있음