[Web] 모바일 기기 Chrome DevTools 실시간 확인방법

안녕하세요.

오늘은 모바일 기기에서 실행 중인 화면을 Chrome DevTools를 통해 디버깅하는 방법을 알아보도록 하겠습니다.

Chrome DevTools 소개

Chrome DevTools는 Google Chrome 브라우저에 직접 내장된 웹 개발자 도구입니다. 이것은 웹 개발자들을 위한 디버깅, 편집 및 분석 기능을 제공하여 웹 개발자들에게 필수적인 도구로 자리 잡았습니다. 문제 해결, 성능 최적화 또는 디자인 변경 실험 등에 여러 방면에서 사용되는 도구입니다. 

사용할 명령어

chrome://inspect

chrome://inspect란 무엇인가?

Chrome DevTools의 핵심에는 모바일 장치를 검사하고 디버깅하는 기능인 chrome://inspect가 있습니다. 많은 개발자가 데스크톱 웹 개발을 위해 DevTools를 사용하는 것을 알고 있지만, chrome://inspect는 이러한 기능을 모바일 장치에까지 확장하여 모바일 웹 사이트 및 응용 프로그램을 쉽게 디버깅하고 테스트할 수 있게 합니다.

 

chrome://inspect 접근하기

chrome://inspect에 접근하는 것은 간단합니다. Chrome을 열고 주소 표시줄에 chrome://inspect를 입력하면 됩니다. 이렇게 하면 모바일 장치 검사 기능을 포함한 다양한 도구 및 기능에 액세스 할 수 있는 DevTools 창이 열립니다.

chrome://inspect 접근 후 모바일기기를 연결한 모습

모바일 기기 연결하기

안드로이드 스마트폰 사용자 기준으로 개발자 옵션을 활성화시킨 후 USB 디버깅 모드를 활성화해주셔야 합니다. 상세한 방법은 서술하지 않겠습니다.

DevTools 열기

inspect 화면에서 정상적으로 연결이 완료되었다면, 목록에 현재 실행 중인 Chrome과 열려있는 Tab들의 목록이 화면에 표시됩니다. 디버깅할 Tab을 확인하고 하단의 inspect를 선택하면 DevTools가 새로운 창으로 보여집니다.

모바일 화면을 실시간으로 확인할 수 있는 DevTools

사용방법

데스크톱의 브라우저에서 사용하는 것과 모두 동일하게 동작합니다. 화면 부분을 마우스로 드래그하며 화면을 이동시킬 수도 있습니다. 모바일 기기에서 직접 화면을 조작하여도 실시간으로 데스크톱 화면에서도 반영됩니다.

FAQ

Chrome 브라우저에서만 할 수 있나요?

아닙니다. Chromium기반의 브라우저라면 어떤 것이든 가능합니다. 참고로 저는 Whale 브라우저에서 진행했습니다. 다만 Chromium기반이 아닌 다른 브라우저에서는 위의 설명한 방법이 동작하지 않을 수 있습니다.

웹 페이지 접속화면만 디버깅할 수 있나요?

아닙니다. 다른 앱 내의 브라우저를 통해 접속한 페이지도 같은 방식으로 inspect 하여 디버깅할 수 있습니다. 일반적으로 앱 내에서 동작하는 Webview 엔진이 Chromium기반이기 때문에 위의 기능이 가능합니다.

결론

간단하게 데스크톱에서 모바일 기기의 화면을 디버깅하는 방법을 알아보았습니다. chrome://inspect는 모바일 웹 개발에 있어서 디버깅 및 테스트 프로세스를 간편하게 만들어주는 강력한 도구입니다. 모바일 웹 사이트를 검사하고 모바일 응용 프로그램을 디버깅하고 성능을 최적화하는 데 필요한 도구로써 활용해 보시기 바랍니다.

 

저는 티스토리 블로그를 시작하며 모바일 화면에서 블로그 화면이 모바일 화면용으로 반응형이 동작하지 않고 엄청나게 축소되어 나오는 문제를 수정하기 위해 해당 방법을 활용하여 해결할 수 있었습니다.