앱 원격 디버깅

회사에서는 앱 디버깅하기가 어렵다. 앱의 호스트를 특정 운영이나 개발 서버로 지정하기가 어려워서.

그래서 생각한 것이 웹뷰

웹뷰 : 네이티브 앱에 내재되어 있는 웹브라우저. 웹콘텐츠를 네이티브 앱뷰와 함께 사용자에게 보여줄 수 있음.

앱스토어에 종속되지 않아서 즉시 배포 가능.

ios와 android 구현에 따른 서비스 차이점 발생x -> 아이폰, 안드로이드 둘다 테스트하기 용이.

내부적으로 아이폰은 테스트하기가 정말 어려웠다. 맥북도 지원이 어려웠었음.

웹뷰 디버깅 방법

pc에서 개발하는 경우, F11 개발자도구를 켜서 디버깅했었음

그러나 모바일은? 개발자도구를 띄우기 어려웠다.

카카오테크에서 생각한 방법

1. 프록시로 네트워크 요청 가로채서 원하는값이나 에러 응답하기

네트워크 요청 한정이라서 DOM이나 css 테스트는 어렵다.

2. Web Devtools

안드로이드의 chrome://inspect & iOS의 Safari 개발자용 도구
PC와 모바일 기기를 케이블로 직접 연결한다.

케이블이 필수고, 디버그용 빌드에서만 가능. iOS는 기기등록 제한이 있을 수 있다는 단점.(1대로만 테스트해야 한다니..)

3. Virtual Device

Android의 Android Virtual Device & iOS의 Xcode Simulator
시뮬레이터에서 웹뷰가 실행되면 브라우저 devtools 사용이 가능하다.

환경 세팅이 복잡, 앱빌드에 수십분 소요가 단점이라고 한다.

4. vConsole

Tencent의 오픈소스
NPM 모듈이나 스크립트를 삽입하여 간편하게 사용할 수 있다.

화면을 가리는 비율높고 인터렉션하며 동시에 확인하기가 어렵다.

인터렉션 : 사용자와 앱간의 상호작용. 사용자가 앱의 기능을 사용하면서 발생하는 모든 행동과 반응을 포함한다.

기존의 디버깅 방법은 피로감이 높았고, 개발자모드를 항상 켰어야 했다.

새로운 웹뷰 디버깅 환경

목표

케이블 없이 웹뷰와 연결, PC환경에서 디버깅하는것
환경에 제약이 없이 동일하게 디버깅 실행
로컬환경이 아닌 배포되어 있는 환경에서도 쉽게 사용이 가능해야 한다.
가상의 환경에서 실행하는게 아닌 실제 클라이언트상에서 실행(왜냐하면 특정상황에서만 발생하는 이슈. 특정 버전에서만이라던가 그런 구체적인 상황에서만 발생하는 이슈가 있을 수 있어서.)

네트워크 요청, 소스, 콘솔등 확인 가능.

Chrome Devtools와 Protocol

크롬 개발자 도구UI 제공하는 ChromeDevtools/devtools-frontend를 사용했다고 한다.

NPM에 존재는 하나, gclient라는 구글의 모듈 매니저로 별도 빌드가 필요하다.

gclient : Google API 클라이언트 라이브러리의 일환으로, 다양한 구글 서비스에 접근하고 상호작용할 수 있도록 도와주는 도구입니다. 주로 Python을 비롯한 여러 프로그래밍 언어에서 사용되며, 개발자가 Google의 각종 API를 더 쉽게 사용할 수 있게 해줍니다.