Hotwire Native 애플리케이션의 WebView 디버깅은 플랫폼별로 상이한 접근 방식을 요구합니다. 각 플랫폼에 대한 상세한 절차는 다음과 같습니다.
iOS WebView 디버깅
iOS 앱의 웹 인스펙터를 연결하는 과정은 다음과 같은 단계를 포함합니다:
-
앱 실행: 먼저 시뮬레이터에서 Hotwire Native 앱을 실행합니다.
-
Safari 개발자 모드 활성화: Safari 앱을 열고
환경설정(Preferences) > 고급(Advanced) > 개발자용 기능 보기(Show features for web developers)를 클릭하여 개발 모드를 활성화합니다. 이는CMD + ,단축키를 통해서도 접근할 수 있습니다. -
웹 인스펙터 연결: 이제
Safari > 개발(Develop) > Simulator메뉴를 통해 실행 중인 앱의 웹 인스펙터를 열 수 있습니다.
주의사항: 구형 Hotwire Native 버전을 사용하는 경우, 웹뷰가 검사 가능하도록 설정해야 할 수 있습니다. 이는 AppDelegate 내의 Hotwire.config 객체에서 다음과 같이 설정할 수 있습니다.
swift
Hotwire.config.makeCustomWebView = { config in
let webView = WKWebView(frame: .zero, configuration: config)
webView.allowsLinkPreview = false
webView.isInspectable = true
return webView
}
Android WebView 디버깅
Android 앱의 웹 인스펙터 연결은 iOS보다 훨씬 간편합니다:
-
앱 실행: Hotwire Native Android 앱이 실행 중인 상태에서.
-
Chromium 기반 브라우저 접속: Chromium 기반 브라우저(예: Chrome)를 열고
chrome://inspect/#devices주소로 이동합니다. 실행 중인 앱의 웹뷰가 자동으로 감지되어 디버깅할 수 있는 옵션이 제공됩니다.
WebView 디버거의 이점
웹 인스펙터에 접근할 수 있게 되면 다음과 같은 다양한 이점을 얻을 수 있습니다:
-
CSS 스타일 테스트: 네이티브 환경에만 적용되는 CSS 스타일을 직접 테스트하고 수정할 수 있습니다.
-
Bridge 컴포넌트 디버깅: 네이티브와 웹뷰 간의 통신을 담당하는 Bridge 컴포넌트의 동작을 상세히 디버깅할 수 있습니다.
-
코드 디버깅: 웹뷰 내에서 실행되는 JavaScript 코드 자체를 디버깅하고, 중단점(breakpoint)을 설정하며, 변수 값을 확인하는 등 웹 개발자가 익숙한 모든 디버깅 기능을 활용할 수 있습니다.