컴퓨터의 Android용 Chrome에서 웹 페이지를 디버그하는 방법

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

컴퓨터의 페이지라면 Chrome의 오른쪽 클릭 컨텍스트 메뉴에서 옵션을 사용하여 쉽게 디버깅할 수 있었지만 모바일 페이지에서는 그렇지 않습니다. 그래서 오늘은 디버깅 방법을 알려드리겠습니다. 모바일 웹페이지 Android용 Chrome 및 Android SDK를 사용하여 컴퓨터에서

웹 페이지 디버깅

1 단계: 다운로드 및 설치 안드로이드 SDK 컴퓨터에서 실행하십시오. Java가 설치되어 있지 않으면 설치 프로그램에서 Java를 다운로드하도록 요청합니다.

컴퓨터에서 Android SDK를 처음 실행하면 여러 API와 도구를 다운로드하라는 메시지가 표시됩니다. Android SDK를 설치하는 유일한 목적이 페이지를 디버그하는 것이라면 다음을 제외한 모든 항목을 선택 취소하십시오. Android SDK 플랫폼 도구 그리고 패키지 설치 단추.

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

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

4단계: 그런 다음 Android 휴대 전화에서 Chrome을 열고 설정—>개발자 도구 USB 웹 디버깅 활성화 옵션을 선택하십시오.

5단계: 이제 명령 프롬프트에서 명령을 실행하십시오. adb 정방향 TCP: 9222 지역 요약: chrome_devtools_remote 성공적으로 실행되면 Windows에서 Chrome 브라우저를 엽니다.

6단계: Android Chrome 브라우저에서 디버그하려는 페이지를 열고 URL을 엽니다. 로컬 호스트: 9222 컴퓨터의 Chrome 브라우저에서

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

결론

이 트릭이 많은 웹 개발자가 스마트폰용으로 웹 페이지를 최적화하는 데 도움이 될 것이라고 확신합니다. 나는 내 웹 페이지를 구성하기 위해 트릭을 사용했고 그것은 매력처럼 작동했습니다. 그러나 컴퓨터에서 스마트폰 웹 페이지를 디버깅하는 더 좋은 방법을 알고 있다면 공유해 주십시오.