크롬 브라우저 개발자 도구 - Device Mode

개발자도구여는 법 

- Ctrl+Shift+I

- 마우스 우 클릭 > 리스트에서 '검사' 클릭

Device Mode

'디바이스 아이콘' 클릭하면 Device Mode 접근 가능

디바이스 사용자 추가 방법은

Responsive옆에 '▼' 클릭 한 후 나오는 리스트에서 'Edit..' 클릭

여기에서 디바이스 추가 및 커스텀이 가능하다.

Add custom device... 클릭해서 수치 넣고 Add 

리스트에서 확인 가능!

저 막대기 바를 눌러서 크기 변경 가능

옵션 아이콘을 눌러서 Show media queries 누르면

사용된 미디어 쿼리가 확인 가능.

마우스 올려두면 확인가능하지만

파란색이 max-width 고 주황색이 min-width

옵션에서 show rulers누르면

이렇게 설정됩니다.

그리구 capture screenshot을 하게 되면

현재 페이지의 스크린샷을 저장!

현재 페이지 캡쳐가 필요할때 유용할 것 같다~