[ 크롬 개발자도구 ] 기기모드 (Device Mode) 사용하기

안녕하세요. 제임스 입니다. 

이번에는 크롬 개발자도구 (Chrome DevTools) 의 Device Mode 사용하는 법에 대해 알아 보겠습니다. 

■ Device Mode 란? 

Device Mode 는 모바일 브라우저 개발을 위해 지원 하는 기능으로 다양한 기기와 기능을 시뮬레이션 할 수 있습니다. 

즉, 실 단말에서 테스트를 하는 것이 아니라 PC 크롬 브라우저의 Device Mode 를 ON 하여 모바일 단말 없이 모바일 브라우저의 기능을 사용 및 테스트 할 수 있습니다. 

■ Device Mode 전환하기

1. Device Mode 전환은 아래와 같이 버튼 하나만 클릭 하면 ON / OFF 가 가능합니다. 

2. 단축키를 이용하여 ON / OFF 를 할 수 있습니다. 

Windows & Linux --> Ctrl + Shift + M

Mac --> Command + Shift + M

Device Mode 아이콘이 파란색 () 이면 ON 상태

Device Mode 아이콘이 회색 () 이면 OFF 상태 입니다. 

■ Device Mode 사용하기

우리가 많이 사용하는 포털 사이트 하면 네이버가 떠오르는 분들이 많을 것 같습니다. 

그래서 www.naver.com (PC 홈페이지) 를 이용하여 Device Mode 를 활성화 / 비활성화 해보겠습니다. 

네이버 PC 홈페이지에 접속 후 DevTools 를 실행 했습니다. 

Device Mode 아이콘이 회색으로 아직 모바일 설정이 아님을 알 수 있습니다. 

우측 Device Mode 아이콘이 푸른색이 되었습니다. Device Mode 가 ON (활성화) 된 상태 입니다. 

푸른색 박스로 표기 한 부분 보시면 현재 Device Mode 가 Galaxy S5 로 잡혀 있는 것이 보입니다. 

이와 관련된 내용은 차후 더 자세히 설명 하겠습니다. 

화면만 작아 진것 같이 보이지 페이지 자체는 네이버 PC 홈페이지가 그대로 열려 있습니다. 

이는 이전 페이지를 호출 한 상태 그대로 Device Mode 만 변경했기 때문입니다. 

휴대폰 브라우저에서 네이버 PC 홈페이를 열었다고 생각하시면 됩니다.

화면은 F5 를 누르거나 주소창을 클릭 후 엔터키를 쳐서 다시 화면을 로드 하면 주소가 www.naver.com 에서 m.naver.com 으로 변경된 것을 확인 하실 수 있습니다. 

현재 브라우저의 User Agent 값은 아래와 같습니다. 

user-agent:

Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Mobile Safari/537.36

네이버 홈페이지에서 현재 브라우저 User Agent 값을 읽었는데 Mobile 이고 Android 5.0 이라고 했습니다. 당연히 모바일 단말로 인식하고 호출 URL 을 모바일 전용 홈페이지인 m.naver.com 으로 옮겨 준것을 알 수 있습니다. 

모바일 웹 개발 시 Device Mode 를 적극 활용 하면 편하게 개발을 하실 수 있을 겁니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D