최신 Chrome 브라우저는 훌륭한 소프트웨어입니다. 무엇보다 프로파일링을 제공하여 웹 페이지에 대한 심층적인 분석과 성능 데이터를 제공합니다. 요즘은 Chrome 브라우저뿐만 아니라 대부분의 최신 웹 브라우저에서 개발자 도구를 사용할 수 있습니다. 이 개발자 도구를 사용하면 USB를 통해 모바일 기기를 컴퓨터에 연결하고 웹 페이지 소스 코드 및 프로필 성능을 검사할 수 있습니다.
이 기능은 실제 모바일 네트워크와 하드웨어를 사용하여 실제 모바일 장치에서 웹 페이지를 테스트하고 디버깅할 수 있도록 하므로 모바일 웹 개발자에게 꼭 필요한 기능입니다. 일반적으로 개발자 도구를 사용하면 모바일 화면 크기와 네트워크 속도를 시뮬레이션 할 수 있습니다. 하지만 실제 모바일 기기에서 테스트하는 것을 대체할 수는 없습니다.
안드로이드용 Chrome 브라우저에서 원격 디버깅을 활성화하려면 다음과 같이 합니다.
-
안드로이드 기기에서 USB 디버깅을 활성화합니다.
- 설정 > 휴대전화 정보 > 소프트웨어 정보를 클릭하고 빌드 번호가 표시될 때까지 스크롤을 내립니다.
- "개발자 모드를 켰습니다." 메시지가 나올 때까지 빌드 번호를 7번 클릭합니다.
- 이제 설정 메뉴 최하단에서 개발자 옵션을 사용할 수 있습니다.
- 설정 > 개발자 옵션으로 이동하여 USB 디버깅을 확인합니다.
- USB를 통해 모바일 기기를 데스크톱에 연결합니다.
- 데스크톱의 크롬 브라우저에서 개발자 도구를 열고 Menu > More Tools > Remote devices를 클릭합니다.
- 이제 데스크톱 화면에 안드로이드 기기에서 열려있는 웹 페이지가 표시됩니다.
이제 모바일 기기의 Chrome 브라우저를 데스크톱 브라우저에서 실행 중인 것처럼 개발자 도구를 사용할 수 있습니다. 또한 모바일 기기의 화면을 데스크톱 개발자 도구 내의 패널로 미러링 할 수도 있습니다. 이를 통해 데스크톱 컴퓨터에서 직접 모바일 기기를 컨트롤할 수 있습니다.
다음 이미지는 Chrome DevTools을 사용한 원격 디버깅 세션을 보여 주며, AMP 페이지의 성능에 대한 폭포형 차트(Waterfall Charts)를 제공합니다.
iOS의 경우 macOS 용 사파리 브라우저도 이와 유사한 원격 디버깅 기능을 제공합니다. 각각의 페이지 성능을 비교할 수 있습니다.
- AMP가 아닌 원본 페이지
- 원본 서버에서 제공한 AMP 페이지
- AMP 캐시에서 제공한 AMP 페이지
기존의 AMP가 아닌 페이지가 특별히 잘 만들어진 경우가 아니라면, 이 테스트 도구에서 분석 결과를 살펴보면서 성능을 개선할 수 있습니다. 자세한 내용은 여기를 참조하세요.