PC용 크롬 브라우저에서 모바일 기기 대응 웹페이지 보기(개발자 도구) IT/잡담


PC용 구글 크롬 브라우저의 개발자 도구(Developer Tools)를 이용하면, 웹사이트에서 스마트폰 등 모바일 기기 접속에 대응하기 위해 만들어진 페이지를 볼 수 있다. 웹개발자가 반응형 웹 관련 시험/디버깅을 할 수 있도록 해 주는 기능이다.

개발자 도구를 실행하려면 메뉴에서 찾아서 선택하거나 단축키를 누르면 된다. 메뉴는 "도구 더 보기(More Tools)" -> "개발자 도구(Developer Tools)"를 선택하면 되고, 개발자 도구 단축기는 컨트롤(Ctrl)+쉬프트(Shift)+I를 누르면 되겠다.

개발자 도구가 실행되면 디바이스 툴바(Device Toolbar)를 켜자. 웹 소스코드가 표시되는 창 바로 위에 아이콘이 있고, 단축키는 컨트롤+쉬프트+M이다.

디바이스 툴바에서 현재 실행중인 크롬 브라우저가 마치 모바일 기기에서 실행되고 있는 것처럼 보이도록 할 수 있다. 전송갤럭시S5, 픽셀2, 아이폰, 아이패드 등을 선택 가능. HTTP 요청 메시지 전송이 이루어질 때 포함되는 기기 정보(User-Agent) 역시 선택한 기기에 맞추어 변경된다.



덧글

댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.

Google Analytics


B-Side


adsense(w160_h600)2

통계 위젯 (화이트)

605300
3990
1845249

ad_widget_2