이 가이드는 갤럭시 스마트폰의 모바일 크롬에서 여는 페이지의 개발자 도구를 사용하는 방법을 정리합니다.
웹개발을 할때 모바일 크롬에서의 개발자 도구를 확인해야 할 때가 있는데요. PC용 크롬 개발자도구에서 모바일모드가 있지만, 이와는 달리 스마트폰에서만 나타나는 에러들을 확인하고 싶을 때에는 개발자모드를 통해 직접 모바일 크롬의 개발자 도구를 사용할 수 있습니다.
TABLE OF CONTENTS
갤럭시 개발자 모드 설정하기
모바일 크롬 개발자 도구를 사용하기 위해서는 먼저 갤럭시 스마트폰에 개발자 모드가 설정 되어 있어야 합니다. 개발자 모드 설정하는 방법은 이 글을 참고해 보세요.
갤럭시 USB 디버깅 설정하기
개발자 모드를 설정했다면 USB 디버깅을 설정해야 모바일 크롬의 개발자 모드를 사용할 수 있는데요. 그전에 갤럭시의 경우 보안을 이유로 개발자 모드의 USB 디버깅 설정이 안되도록 설정되어 있기 때문에, 보안 부분을 먼저 풀어야 합니다.
- 설정 앱에서 보안 및 개인정보 보호를 선택합니다.
- 해당 화면에서 보안 위험 자동 차단을 해제하여 보안을 해제 합니다.
- 이제 USB 디버깅을 설정하겠습니다. 다시 설정 앱 – 개발자 옵션을 선택합니다.
- 해당 화면에서 USB 디버깅 부분이 이제 설정이 가능한 상태가 되었을 텐데요. 해당 부분을 활성화 합니다.
PC에서 모바일 크롬 개발자 모드 사용하기
이제, 준비가 모두 끝났습니다. PC에서 크롬 브라우저를 실행한다음 주소표시줄에 아래와 같이 입력합니다.
chrome://inspect
위와 같은 화면이 표시되는데요. 아마 Remote Target 에는 아무것도 표시되지 않을 겁니다. 이 화면이 표시된 상태에서 PC와 갤럭시 스마트폰을 USB로 연결합니다.
갤럭시를 PC와 USB로 연결하면 USB 디버깅으로 연결하겠냐고 갤럭시에 표시되는데요. 여기서 허용을 눌러줍니다.
USB 디버깅을 통해 PC와 연결할 경우 스마트폰을 PC에서 조작이 가능하게 됩니다. 보안 상 위험이 있으므로, 반드시 필요한 작업이 끝나면 USB 디버깅 및 보안관련 옵션을 다시 활성화 하시기 바랍니다.
USB 디버깅을 허용하고 좀 기다리며 아래와 같이 PC 크롬 화면에 현재 크롬 / 삼성 브라우저에서 열려있는 페이지들이 목록으로 표시됩니다. 확인할 페이지의 아래에 있는 inspect 버튼을 클릭합니다.
팝업창이 열리면서 현재 갤럭시 스마트폰 삼성브라우저 또는 크롬에서 열려있는 페이지가 새창으로 표시되는데요. 여기에는 개발자 도구도 같이 표시됩니다.
주소 입력줄은 작동하지 않으므로, 화면 조작은 스마트폰에서 하면 됩니다. 다른 사이트로 이동하고자 할때는 스마트폰 브라우저에서 원하는 주소를 입력하면 PC 창에도 바로 바뀌는 것을 볼 수 있습니다. 또한 오른쪽에 개발자 모드로 소스 및 다양한 내용을 확인할 수 있습니다.
이번 글에서는 갤럭시 모바일 크롬 관리자 모드 사용하는 방법에 대해서 알아봤습니다. 지금까지 안테나곰이었습니다.