안드로이드 기기 디버깅을 위한 크롬브라우저 설정

제가 알기로는 안드로이드 프로그래밍 할 때, 두 가지를 생각해야 할 것 같습니다.

네이티브 프로그래밍 - 일반적으로 자바나 코틀린 등의 프로그래밍 언어를 사용해서 구성 하는 것과
웹 프로그래맹 - Javascript/Html/css 를 이용하여 구성 하는 것이
바로 그 것 입니다.

물론 그 이외에 NDK 를 이용해서 개발 하는 방법이 있는 데 이는 기존에 C/C++ 등의 언어로 개발 되어 있는 안드로이드 이외의 다른 플랫폼의 실행 환경을
안드로이드로 포팅 할 때 주로 쓰이고 있는 것이 아닐까 하는 것이죠

네이티브 프로그래밍의 경우에는 안드로이드 스튜디오를 사용 해서 프로그래밍 하면 될 듯 하지만, 크롬 브라우저의 강력한 개발자 툴을 이용하여 디버깅을 할 수 있으면 더욱 더 좋을 것 같습니다.
왜냐 하면, 각 페이지에 적용한 CSS 나 혹은 HTML 코드가 해당 해상도에서 어떻게 나오는 지 확인 해봐야 하니까요.

특히 안드로이드 웹 프로그래밍을 할 때는 특히나 말이죠.

해상도 별로 나오는 GUI 의 화면을 어느 정도는 간접적이기는 하나 확인 해 볼 수 있을 것입니다.

오늘은 안드로이드 기기 디버깅을 위해서 크롬브라우저를 설정 하는 방법에 대해서 알아보도로 하겠습니다.

대충 설정 화면을 보면 다음과 같을 것입니다.(F12)

만약 원하는 기기의 해상도가 없다면 위 설정에서 해당 기기의 해상도를 등록 해 줄 수도 있습니다.

DevTools 를 활성화 하여(F12) 아래의 버튼을 누르게 되면 실 화면에 해상도가 적용이 됩니다.

브라우저 버전 별로 약간의 차이가 있을 수가 있으나, 사용하는 법은 비슷 할 것입니다.

아래는 기본으로 설정 된 400 X 600 의 해상도 입니다. 그리고 리스트에 위에서 설명한 기기 별 해상도를 이름으로 설정 할 수 있도록 되어 있습니다.

예를 들어 Galaxy Tab S4 를 선택하면 화면을 해당 기기의 해상도로 다음과 같이 변경이 되겠죠?

갤럭시 탭 S6 의 경우, 해상도가 2560 x 1600 (WQXGA)입니다.

물론 항상 설정해서 쓸수도 있지만, 등록 할 수가 있으니 한 번 등록을 해 보도록 하겠습니다.

 

그런데, 실제 Screen Resolution 은 틀릴 수가 있다는 것이 문제 였습니다.

따라서 약간 다른 접근 방식이 필요 하네요

 

GitHub - amirshnll/custom-device-emulation-chrome: custom device emulation chrome | How To Add Custom Device on Chrome Emulation

위 사이트에서 갤럭시 탭의 스크린 해상도는 다음과 같이 된다는 것을 알아 냈습니다.

그리고, 실제 디바이스에서 mydevice.io 사이트를 접근 해도 될 것 같습니다.

https://mydevice.io 

이상 입니다.