UX 개발/개발도구와 환경 안드로이드 기기로 모바일웹(크롬) 개발자 모드 디버깅 환경 구축하기Jamie Choi 2022. 2. 22. 16:58 데스크탑 컴퓨팅 환경에서 제작된 개발산출물은 모바일 컴퓨팅 환경을 정확하게 시뮬레이션하지 못합니다. 그런 이유로 가장 확실한 모바일웹 디버깅 환경을 구축하는 방법은 모바일 기기를 통해서 디버깅을 하는 것입니다. 안드로이드 기기의 경우 크롬 웹브라우저를 통해 맥이든 윈도우든 상관 없이 쉽게 디버깅 환경을 구축할 수 있습니다. 유선 케이블을 이용하지 않고 무선으로 연결하거나, 크롬 외 다른 브라우저로도 모바일웹을 디버깅할 수 있는 방법은 별도로 존재하니, 해당 내용 확인이 필요한 경우에는 별도 리서치를 추가적으로 진행하시기를 권장 드립니다. 1. 안드로이드 기기의 개발자 모드 활성화하기안드로이드 설정에 들어가서 개발자 옵션 메뉴에 진입해 USB 디버깅 기능을 활성화합니다. 더불어 원활한 디버깅 환경 구축을 위해 화면 켜짐 상태 유지도 함께 활성화합니다. 특정 운영체제에서는 지원을 안 하는 기능일 수 있으나, 확인 결과 대부분의 구버전 안드로이드에서도 지원하는 옵션이므로 버전에 상관 없이 관련 내용을 확인할 수 있을 것입니다.  2. 안드로이드 기기를 개발용 컴퓨터에 케이블로 연결하기구형 안드로이드 기기의 경우 5핀 케이블로 신형 기기의 경우 USB C 케이블을 이용해 개발용으로 사용 중인 컴퓨터에 연결합니다. 3. 크롬 실행 후 chrome://inspect 옵션에서 개발자 도구개발용 컴퓨터에서 크롬을 실행하여 'chrome://inspect'를 주소창에 입력하여 개발자도구 페이지에 진입합니다. 안드로이드 기기에서 디버깅 모드를 허용하겠냐는 질의 팝업이 발생하면, 허용 버튼을 눌러 디버깅 모드 전환을 진행합니다. 일정 시간이 지나면 연결된 안드로이드 기기 정보가 디바이스 목록에 표시되는 것을 확인할 수 있습니다. 디버깅을 하고자 하는 웹URL을 입력하면 안드로이드 기기의 크롬 어플리케이션을 통해서 개발자 도구(Web Inspector)를 활성화하고자 하는 URL들을 열 수 있습니다. 확인하고자 하는 URL을 열은 이후 inspect 버튼을 누르면 컴퓨터용 크롬에서 개발자 도구가 활성화되며 안드로이드 기기의 크롬에서 inspect할 엘리먼트들을 확인할 수 있습니다. 컴퓨터용 크롬에서 작동하는 개발자 도구의 기능들을 활용하여 안드로이드 기기 상에서의 정상작동 여부를 확인할 수 있습니다. 4. 로컬호스트 환경을 포트포워딩을 통해서 연결로컬호스트로 개발환경이 구축된 경우 해당 포트를 포트포워딩함으로써 안드로이드 기기에서 해당 개발환경을 열 수 있습니다. 하기 첨부된 이미지를 예시로 들면, 3000번 포트의 개발환경을 8080으로 포트포워딩함으로써, 안드로이드 기기에서 localhost:8080을 접속하면 개발용 컴퓨터에서 작업하던 로컬호스트 환경에 접속이 가능합니다. 모바일 크롬 브라우저에서 디버깅하기웹페이지를 개발할 때, 프론트엔드 영역에서 디버깅을 할 때 PC에서는 개발자 도구를 이용해서 console 디버깅을 하는 것이 일반적이지만 모바일 폰의 브라우저에서는 디버깅이 힘들었습니다. 물론 PC에서도 디버깅 툴에서 모바일 디바이스로 테스트할 수 있지만 실제 폰에서 확인하는 것과는 100% 같다고 할 수 없죠. 이런 부분을 해결하기 위해 모바일 크롬 브라우저의 inspect 기능을 사용할 수 있습니다. 제가 아이폰을 사용하기 때문에 아이폰 크롬 브라우저로 테스트 했지만 안드로이드 계열 폰의 크롬 브라우저도 동일하게 작동하지 않을까 예상해봅니다. 아이폰 크롬 브라우저 Javascript Console위 이미지처럼 inspect 페이지를 띄우고 “로깅 시작" 버튼을 누르면 “로깅 중지" 버튼을 누를 때까지 다른 창에서 발생되는 로그를 확인할 수 있습니다. AWS S3에 테스트 페이지를 하나 올려봤습니다. console.log(“load…”) 부분을 실행하는 간단한 페이지인데 실제 페이지를 로딩해본 뒤 이 페이지에 와보니 위와 같이 로그를 기록했습니다. 기획자나 개발자가 모바일에서도 출력 값을 손쉽게 파악할 수 있는 방법이라 사용하시면 유용할 것 같습니다. 감사합니다. 스마트폰 앱 브라우저에서 크롬 개발자 도구 사용하기업무 중 다음과 같은 일을 처리해야 했습니다.
Android WebView에서는 WebView 클래스 콜백을 이용하여 Header를 쉽게 확인 가능하지만 외부 브라우저에서는 어떻게 확인해야할까요 삼성 브라우저앱과 구글 크롬앱에서는 요청을 확인 할 수 있는 방법을 찾지 못했고 다른 방법으로 접근을 하게 되었습니다. 일단 모바일기기와 PC가 필요하고 구글 크롬이 필요합니다. 구글 크롬에는 여러가지 확장 기능들이 존재합니다. 그중 “inspect” 라는 기능을 사용하여 개발자도구를 열 수 있습니다. Link : chrome://inspect/#devices inspect해당 링크로 들어가면 위와 같은 페이지를 확인 할 수 있습니다. 그 중 Devices에 들어가보면 현재 PC에 연결된 모바일 디바이스를 확인 할 수 있습니다. 현재 PC에는 SM-G930S가 연결되어있는것이 확인됩니다. 모바일기기명 아래에는 com.sec.android.app.sbrowser와 Chrome 이라고 적혀있는데 com.sec.android.app.sbrowser는 삼성브라우저앱을 Chrome은 Google Chrome 앱을 의미합니다. com.sec.android.app.sbrowser 메뉴에는 NAVER 체크박스가 하나 표시되어있는데 현재 SM-G930S의 삼성브라우저에서 NAVER가 켜져있다는것을 의미합니다. 그리고 그 아래 파란색 글자 “inspect”를 선택하면 새 창이 하나 뜨게 됩니다. 좌측에는 현재 모바일기기에 표시되고있는 브라우저가 표시되고 우측에는 개발자도구가 표시됩니다! 이제 이 개발자 도구를 이용하여 Network탭에 들어가면 기존에 PC Chrome 에서 확인하는것과 동일하게 header의 내용이나 원하는 작업들을 진행 할 수 있습니다. 좌측 모바일기기의 화면은 신기하게도 마우스로 컨트롤하면 실제 모바일기기의 브라우저가 스크롤 되거나 링크 이동이 가능하지만 반응이나 사용성이 썩 좋지는 않습니다. 이상 스마트폰 앱 브라우저에서 크롬 개발자 도구 사용하기를 마칩니다. |
모바일 크롬 콘솔 - mobail keulom konsol
관련 게시물
저작권 © 2024 ihoctot Inc.
