스마트폰 앱 브라우저에서 크롬 개발자 도구 사용하기

Diordna
cashwalk
Published in
3 min readAug 2, 2018

업무 중 다음과 같은 일을 처리해야 했습니다.

Url에 특정 값을 header에 담아 보내고 외부브라우저로 띄워주세요.

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의 내용이나 원하는 작업들을 진행 할 수 있습니다.

좌측 모바일기기의 화면은 신기하게도 마우스로 컨트롤하면 실제 모바일기기의 브라우저가 스크롤 되거나 링크 이동이 가능하지만 반응이나 사용성이 썩 좋지는 않습니다.

이상 스마트폰 앱 브라우저에서 크롬 개발자 도구 사용하기를 마칩니다.

--

--