Chrome 개발자 도구 tip

해당 문서는 chrome 개발자 도구 명령어 중 유용하다고 생각된 부분들을 정리해둔 글입니다.

명령어 확인(전체)

• 단축키: ctrl + shift +p

단축키 입력 시 화면

 

Tip 명령어들

1. Screenshot

• Area screenchot
  • alt + shift + S와 동일 
• Full size screenchot
  • 웹페이지 전체 스크린샷 

    

• Node screenchot
  • 선택한 코드부분만 캡처 

• 결과

2. Show Coverage

• 사용중인 css, js를 퍼센트로 보여줌.
• 사용중인 부분, 미사용부분 확인(빨강 : 미사용, 파랑 : 사용중)
• 로딩시간 줄이는데 용이

3. FPS meter

• 해당페이지의 FPS 확인

 

4. Chrome Code Editer

• 크롬 창에서 코드 수정(go live와 비슷)
• Source - Filesystem