컴퓨터에서 안드로이드에 대한 크롬 웹 페이지를 디버깅하는 방법

블로그 관리자는 Chrome을 사용하여 개인 웹 사이트를 디버깅하여 테마와 CSS의 변경 사항이 서버에 영구적으로 적용되기 전에 어떻게 보이는지 확인합니다. 얼마 전에 스마트 폰을 사용하여 내 사이트를 방문한 사람이 거의 없어 모바일 페이지에 관심을 기울이지 않은 것은 오래 전 아닙니다. 그러나 오늘날 방문자의 상당 부분이 스마트 폰과 태블릿으로 구성되어 있으므로 외모와 프레젠테이션을 처리해야합니다.

컴퓨터의 페이지 인 경우 Chrome의 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴의 옵션을 사용하여 쉽게 디버깅 할 수 있지만 모바일 페이지에서는 옵션이 아닙니다. 오늘은 Android 및 Android 용 Chrome SDK를 사용하여 컴퓨터에서 모바일 웹 페이지를 디버깅하는 방법을 보여 드리겠습니다.

웹 페이지 디버깅

1 단계: 컴퓨터에 Android SDK를 다운로드하여 설치하고 실행합니다. 설치 프로그램이 없으면 설치 프로그램에서 Java를 다운로드하도록 요청합니다.

컴퓨터에서 Android SDK를 처음 실행하면 여러 API 및 도구를 다운로드하라는 메시지가 표시됩니다. Android SDK를 설치하는 유일한 목적이 페이지를 디버그하는 것이라면 Android SDK Platform-tools를 제외한 모든 항목의 선택을 해제하고 패키지 설치 버튼을 클릭하십시오.

2 단계: Android 플랫폼 도구를 설치 한 후 실행 상자 (Windows + R)를 열고 % userprofile % \ AppData \ Local \ Android \ android-sdk \ platform-tools 를 실행하여 Android 플랫폼 도구 디렉토리를 엽니 다.

3 단계: 이제 Ctrl + Shift 키를 누른 채 폴더에서 마우스 오른쪽 버튼을 클릭하여 명령 프롬프트를 엽니 다. 실행 상자를 사용하여 명령 프롬프트를 열고 폴더를 수동으로 탐색 할 수도 있습니다.

4 단계: Android 폰에서 Chrome을 열고 설정 -> 개발자 도구를 열고 USB 웹 디버깅 사용 옵션을 선택합니다.

5 단계: 이제 명령 프롬프트에서 adb forward tcp: 9222 localabstract: chrome_devtools_remote 명령을 실행하고 성공적으로 실행 되면 Windows에서 Chrome 브라우저를 엽니 다.

6 단계: Android Chrome 브라우저에서 디버깅 할 페이지를 열고 컴퓨터의 Chrome 브라우저에서 URL localhost: 9222 를 엽니 다.

즉, Android 브라우저에서 열려있는 모든 페이지가 컴퓨터의 미리보기 이미지로 표시됩니다. 디버그 페이지를 열려면 해당 웹 사이트 미리보기 이미지를 클릭하기 만하면됩니다. Android에서 직접 컴퓨터에서 디버깅 변경 사항을 실시간으로 추적 할 수 있습니다.

결론

이 트릭이 많은 웹 개발자가 스마트 폰용 웹 페이지를 최적화하는 데 도움이 될 것입니다. 나는 트릭을 사용하여 웹 페이지를 구성했으며 매력과 같이 작동했습니다. 그러나 컴퓨터에서 스마트 폰 웹 페이지를 디버깅하는 더 좋은 방법을 알고 있다면 Google과 공유하십시오.