Debuggable Browser for Android APK

기술

웹 개발자 및 웹 디자이너를 위한 디버깅

메모

이 앱은 Android 사용자에게 최고의 웹 앱 사용자 경험을 제공하는 것을 목표로 하는 웹 개발자를 위해 제작되었습니다. 웹 개발자나 웹 디자이너가 아니거나 이것이 무엇에 관한 것인지 잘못 이해했다면 이 앱이 아마도 당신이 찾고 있는 것이 아닐 것입니다 ;)

그래서 그것은 무엇입니까?

디버그 지원 WebView만 있으면 Chrome의 개발자 도구(PC 또는 Mac에서 실행)를 사용하여 실제 장치에서 실행되는 동안 웹 앱을 검사하고 디버그할 수 있습니다.

그게 무슨 소용이야?

Android 기본 브라우저에서 웹 사이트를 열었을 때 다음 문제 중 하나가 발생한 경우 이 앱이 유용할 수 있습니다.

Android 스톡 브라우저에서 볼 때 웹 사이트의 레이아웃이나 스타일이 깨져 보입니다.

JavaScript 코드가 예상한 결과를 생성하지 않았거나 실행 중에 계산이 갑자기 중지되었을 것입니다(예외가 throw되었을 수 있습니까?)

애니메이션이 지연되거나 예상대로 애니메이션되지 않음

설명

웹 앱이 데스크톱 브라우저에서는 제대로 작동하지만 모바일 브라우저에서는 작동하지 않는 경우가 있습니다. 설상가상으로 때때로 결함은 (특정) 모바일 장치에서만 발생하므로 데스크톱 브라우저에서 시뮬레이션 및 재현할 수 없습니다. 이것이 Chrome의 DevTools를 사용한 원격 디버깅이 유용한 것으로 입증된 곳입니다. Android용 Chrome은 이미 이를 완벽하게 지원하지만 Android 기본 브라우저는 지원하지 않습니다. 많은 Android 버그가 기본 브라우저에서만 발생하고 Chrome에서는 발생하지 않기 때문에 이는 불행한 일입니다.

따라서 이 앱을 사용하면 기본 브라우저(WebView) 내에서 웹 사이트를 실행할 수 있으며 Chrome DevTools로 페이지를 검사하고 디버그할 수 있습니다.

원격 디버깅을 시작하는 방법은 무엇입니까?

1. Android 기기에서 개발자 모드를 활성화하고 PC/Mac에 연결합니다.

2. 이 앱을 열고 URL을 입력하여 웹사이트로 이동합니다.

3. PC/Mac에서 Chrome을 열고 주소 표시줄에 "chrome://inspect"를 입력합니다.

4. Chrome에서 "USB 장치 검색"을 선택하면 장치에서 연 웹 페이지가 나열됩니다.

5. 검사를 누르고 Chrome 개발자 도구로 앱 원격 디버깅을 즐기십시오.

자세한 내용은 https://www.pertiller.tech/blog/remote-debugging-the-android-native-browser를 참조하십시오.