WebView DevTools 앱은 시스템 WebView 구성요소 자체를 관리하고 디버그하는 기기 내 유틸리티입니다. 개발 머신에서 실행되며 WebView 인스턴스 내에서 실행되는 실시간 웹 콘텐츠(HTML, CSS, JavaScript)를 원격으로 디버깅할 수 있는 Chrome DevTools와는 별개입니다.
WebView DevTools는 WebView 시스템 구성요소와 함께 기기에 자동으로 설치되는 동반 앱입니다. 앱은 네 가지 영역으로 나뉩니다.
- 홈: 버전 정보를 확인하고 기본 WebView를 사전 출시 채널 버전으로 전환합니다.
- 비정상 종료: WebView 비정상 종료 보고서를 나열하고 업로드합니다.
- 플래그: 개발자 플래그를 설정하여 WebView의 동작을 변경합니다.
- Net Logs: WebView 하위 수준 네트워킹 로그를 나열하고 공유합니다.
WebView DevTools 실행
Android 16 이상이고 개발자 모드가 사용 설정된 기기에서는 설정 > 시스템 > 개발자 옵션 > WebView DevTools로 이동하여 WebView DevTools를 실행할 수 있습니다.
최근 Android 출시에서는 adb 명령어를 사용하여 WebView DevTools를 실행할 수 있습니다.
adb shell am start -a "com.android.webview.SHOW_DEV_UI"
또는 베타, 개발자, 카나리아와 같은 WebView의 사전 출시 채널을 설치하면 WebView DevTools 런처 아이콘을 사용할 수 있습니다.
WebView DevTools를 처음 실행하면 사용 설정한 개발자 플래그를 나열하는 지속적인 알림을 표시하기 위해 알림 권한을 요청합니다.
출시 전 채널로 전환
최신 WebView 기능과 버그 수정은 먼저 사전 출시 채널에서 제공됩니다. WebView DevTools를 사용하여 기기의 WebView 제공자를 전환하여 이러한 변경사항에 대해 앱을 테스트할 수 있습니다. 출시 전 채널을 대상으로 테스트하면 사용자를 대상으로 출시되기 전에 앱이 향후 WebView 버전과 호환되는지 확인할 수 있습니다.
- 안정성과 최신 변경사항에 대한 액세스 간의 원하는 절충에 따라 WebView의 베타, 개발 또는 카나리아 버전을 설치합니다.
- WebView DevTools 앱을 열고 Change Provider를 탭합니다.
- 이 옵션이 표시되지 않으면 오른쪽 상단에 있는 점 3개를 탭하고 WebView 제공자 변경을 선택합니다.
자세한 내용은 WebView 베타, 개발자 버전 또는 Canary 사용해 보기를 참고하세요.
WebView 채널
WebView 채널은 Chrome 출시 채널을 기반으로 합니다. 각 채널은 코드의 안정성과 최신성이 서로 다른 수준을 나타냅니다. 각 WebView 채널을 언제 사용해야 하는지 간략하게 살펴보세요.
카나리아: 매일 업데이트됩니다. 이 채널에는 새로운 기능과 버그 수정이 Chromium 코드베이스에 병합되는 즉시 포함되는 등 최신 변경사항이 적용됩니다. 최근에 병합된 변경사항이 있는 WebView에서 웹 앱이 어떻게 실행되는지 테스트하려는 경우 이 채널을 사용하세요. 하지만 이 채널은 불안정하거나 버그가 포함될 수 있습니다.
개발자: 매주 1~2회 업데이트됩니다. 이 채널은 Canary보다 안정적이지만 최신 변경사항이 포함되어 있습니다. 새로운 기능을 테스트하고 싶지만 카나리아보다 관련 없는 버그의 위험이 적은 개발자에게 가장 적합합니다.
베타: 약 1주마다 업데이트되며 4주마다 주요 업데이트가 있습니다. 이 채널에서는 안정화 버전 출시 약 4~6주 전에 다음 WebView 안정화 버전의 기능을 미리 볼 수 있습니다. 이를 사용하여 예정된 WebView 출시를 대상으로 웹 앱을 테스트하여 호환성을 확인할 수 있습니다.
안정화 버전: 주요 버전은 4주마다 업데이트되고 긴급한 버그 수정이 있는 경우 사소한 버전은 2~3주마다 업데이트됩니다. 모든 사용자에게 출시되는 WebView의 프로덕션 채널입니다. 다른 채널에서 테스트를 거쳤으므로 가장 안정적인 채널입니다. 대부분의 사용자가 현재 사용하는 방식으로 WebView에서 웹 앱을 경험하려는 경우(예: 사용자가 보고한 버그를 재현하려는 경우) 사용합니다.
비정상 종료 UI
앱을 개발하는 동안 WebView가 비정상 종료되면 WebView DevTools를 사용하여 WebView를 나열하고, 업로드하고, 버그 신고를 제출할 수 있습니다.
- 앱이 비정상 종료된 후 앱을 다시 시작하여 비정상 종료 보고서가 생성되도록 합니다.
- WebView DevTools 앱을 열고 비정상 종료를 탭합니다.
자세한 내용은 비정상 종료 UI 문서를 참고하세요.
플래그 UI
WebView DevTools 앱을 사용하면 유용한 플래그를 여러 개 설정하여 기기 전체의 모든 WebView 동작을 변경할 수 있습니다. 대부분의 플래그는 WebView 자체 개발에만 사용되지만 일부는 Android 앱 개발자에게 유용합니다.
highlight-all-webviews: WebView 위에 노란색 색조를 추가하여 WebView를 식별합니다.net-log: WebView 네트워크 활동의 하위 수준 로깅을 사용 설정합니다.webview-log-js-console-messages: JavaScript 콘솔 로그가 Logcat에 표시되도록 합니다.
자세한 내용은 플래그 UI 문서를 참고하세요.
Net 로그
Chrome DevTools를 사용하여 WebView에서 서버 연결 문제를 해결할 수 없는 경우 WebView DevTools를 사용하여 하위 수준 네트워크 로그를 캡처하세요.
- 앱 코드에서 WebView 디버깅을 사용 설정합니다.
- WebView DevTools에서 Flags를 열고
net-log를 찾아 사용 설정합니다. 플래그가 적용되도록 앱을 다시 시작합니다. - 디버그하려는 네트워크 동작을 트리거하는 작업을 실행합니다. 문제를 재현한 후 앱을 닫습니다.
- WebView DevTools의 Net Logs 섹션을 열어 net log 파일을 찾아 공유합니다.
- 네트워크 로그를 시각화하는 온라인 도구인 Netlog Viewer에 JSON 로그 파일을 로드하여 하위 수준 네트워크 이벤트, 소켓 정보, 타이밍 세부정보를 검사할 수 있습니다.
자세한 내용은 WebView의 네트워크 디버깅을 참고하세요.