온누리

크롬 개발자도구를 이용하여 반응형 웹 테스트하기

오늘은 크롬의 여러 기능중에서 개발자 도구를 이용한 반응형 웹페이지의 모바일 테스트방법입니다.

자신의 사이트나 블로그가 모바일에서는 어떻게 보이는지 여러형태로 바로 볼수 있습니다.

개발자가 아니더라도 블로그를 운영하시는 분들중 블로그 스킨을 변경을 할때 굳이 모바일에서 주소를 쳐서 확인할 필요없이 바로 컴퓨터 웹페이지에서 확인이 가능한 것이죠.

크롬을 실행을 시켜서 보고자 하는 웹페이지를 먼저 접속을 합니다.

현재 사용하고 있는 블로그의 모바일에서의 형태는 어떨지를 살펴볼까요?

지금 블로그를 크롬에서 접속한다음 F12키를 누릅니다.

페이지에서 마우스 우측키를 눌러도 되지만 대부분 막아놨기에 F12키를 이용하는것이죠.

그리고 나오는 오른쪽 페이지에서 [토글 디바이스 툴바]를 클릭합니다.

화면 왼쪽 상단에 toggle device toolbar 메뉴가 나옵니다.

Responsive를 눌러보면 여러가지 모바일 기기명이 나옵니다.

최신기기는 보이지 않고 갤럭시S5와 아이폰등이 보입니다.

이중에서 갤럭시s5를 눌러보죠.

다음은 아이폰을 눌러보겠습니다. 잘 나오네요.

아이패드도 보입니다. 각기 한번씩 눌러서 제대로 보이는지 확인해보시면 됩니다.

세로 화면도 있지만 가로화면으로도 볼수 있죠.

크기 조절도 가능합니다. 150%까지 되는군요.

이와같이 크롬의 개발자도구를 이용하여  toggle device toolbar라는 메뉴를 활성화시켜 웹페이지의 모바일에서의 반응형 웹 테스트를 해볼수 있는것이죠.

굳이 개발자가 아니더라도 자신의 웹페이지나 블로그가 모바일에서는 어떻게 보여지는지 확인해볼수 있습니다.