네이티브 앱 WEBView에서 Remote Debug 정리

네이티브 앱에서 자주 사용하는 장면

「왠지 WEBView에서 버그라고 합니다만」

라고 말하면 곧바로 앱 엔지니어 씨에게 던지는 서버 엔지니어의 당신.

나야!!

이런 일을 매회 하고 있으면, 「그 사람 일해 주지 않는다」라고 싫은 시선이 날아올지도 모릅니다.

그래서 앱의 개발 환경을 빌드하고 에뮬레이터로 확인할 때까지 하지 않을 정도의 동작 검증 방법을
  • iOS
  • Android

  • 둘 다 소개합니다.

    환경


  • MacOSX(10.12.6)
  • Chrome (64.0.3282.167)
  • Safari (11.0.1)

  • 대상자


  • 서버 엔지니어로 앱을 빌드하지 않지만 WEBView를 개발하는 사람

  • 사전 준비에 필요한 것


  • iPhone
  • Remote Debug를 원하는 대상 앱(XCode로 빌드한 것에 한합니다. Apple 스토어에서 DL한 앱은 열 수 없습니다)

  • Android
  • 대상 앱에서 WebInspect Debug를 ON으로 한 앱이 아니면 열 수 없습니다.


  • 참고 정보


  • 네이티브 Android 앱 WebView 원격 디버깅 (Google 공식)
  • 【간편】iOS Safari에서 표시한 웹 사이트를 MacOS Safari의 웹 인스펙터로 디버깅하는 방법
  • Android 기기의 개발자 모드를 켜는 방법

  • iOS



    Safari + iPhone이 필요합니다.

    대상 앱 빌드



    iOS 네이티브 앱은 빌드한 앱이 아니면 네이티브 앱의 remote debug를 할 수 없습니다.
    그래서 debug하고 싶은 네이티브 앱을 빌드하고 debug하고 싶은 기기에 넣어주세요.

    iPhone "설정"=> "Safari" => "자세히"=> "웹 관리자"를 켭니다.



    이런 느낌



    이런 느낌



    iPhone을 케이블로 Mac에 연결



    안몬의 케이블이라면 반응하지 않는 경우가 있으므로 주의입니다.

    Safari => 설정 => 개발 메뉴 표시에 체크







    Remote Debug하려는 앱 시작



    앱을 시작한 후 Safari 메뉴에서 => "개발"=> "xx의 iPhone"이라는 항목이 있습니다.
    거기에 대상의 앱명으로 지금 표시하고 있는 WebView의 URL이 표시되고 있으므로 Remote Debug하고 싶은 URL을 클릭하면 WebInspect가 표시됩니다.



    안드로이드



    Chrome + 스마트 폰이 필요합니다.

    대상 앱이 setWebContentsDebuggingEnabled인지 확인



    네이티브 Android 앱 WebView 원격 디버깅 (Google 공식) 에 기재되어 있습니다만, 대상 앱의 WEBView 의 설정에 Debug 허가가 들어 있지 않으면 할 수 없습니다.

    먼저 Debug하고 싶은 대상 앱이 WEbView의 Debug 설정이 들어 있는지 확인하십시오.

    Debug하려는 단말기를 개발자 모드로 설정



    Android 기기의 개발자 모드를 켜는 방법 에 나와 있는 대로 빌드 번호를 깨지도록 연속해서 탭하십시오.

    이제 개발자가 되었습니다! 라고 나오면 OK입니다.

    스마트폰을 Mac에 USB로 연결



    너무 저렴한 USB라고 충전 밖에 해주지 않기 때문에 주의입니다.

    Chrome을 열고 chrome://inspect/#devices를 입력합니다.



    아래와 같이 표시되어 있으면 OK입니다.



    WebInspect 열기



    이런 식으로 표시되고 Inspect를 누르면 웹 네이티브 앱의 WebInspect가 열립니다.



    마지막으로



    빌드 할 정도가 아닌 경우에 어쨌든 유효하고 이것으로 앱 엔지니어 씨와도 사이 좋게 될 수 있군요!!

    좋은 웹페이지 즐겨찾기