크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

인터넷/구글 크롬

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

 

환경: Chrome

 

사이트나 블로그를 운영하시는 분들은 반응형 스킨이 어떤 형태로 기기마다 표현되는지 궁금할 겁니다. 특히 개발자는 매번 스마트폰과 PC 를 번갈아 확인하는 것이 귀찮고 힘들기 때문에 테스트 도구가 필요합니다. 별도의 프로그램 설치없이 크롬 브라우저만 있으면 기기별로 모바일 화면을 확인할 수 있는 방법을 알려 드리겠습니다.

 

F12 단축키 클릭으로 개발자 모드를 띄웁니다. 브라우저 좌/우 혹은 하단에 개발자 모드창이 나타납니다.

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

 

개발자 모드에서 웹 사이트를 PC 가 아닌 모바일 화면으로 보기 위해서는 상단에 있는Toggle device toolbar 를 눌러야 합니다

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

 


사이트 화면은 모바일 환경에 맞는 크기로 바뀌었습니다. 화면 사이즈에 맞게 화면 디자인도 재조정이 됩니다. 만약 디자인이 반응형으로 구현되어 있지 않으면 제대로 표현이 안되겠죠. 기기의 종류와 사이즈는 상단 콤보박스를 통해 변경할 수 있습니다. 삼성 Galaxy S5 외에도 다양한 기기들이 있습니다

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

 

스마트폰처럼 가로/세로 변환도 가능합니다. 기기와 사이즈를 선택하는 툴바 오른쪽 끝에 가로/세로 전환 아이콘을 클릭해 보세요

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

 

만약 자신이 원하는 기기가 없다면 선택 목록에 추가할 수 있습니다. 기기 선택 콤보박스에서 하단에 Edit 메뉴를 선택합니다

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

 

오른쪽 화면에 나타난 Emulated Devices 에서 목록에 디바이스를 선택하면 추가가 됩니다

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

 

자신만의 디바이스를 만들어서 관리하고 싶다면 Add custom device.. 버튼을 눌러 추가합니다

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법


Posted by 녹두장군

댓글을 달아 주세요