WebView 컴포넌트에서 디버거를 사용할 수 있나요?

rnejrl123456 · 11월 21, 2018, 4:35오전

오늘도 어김없이 질문하러 왔습니다 ㅎㅎ

현재 실행되고 있는 React-native앱 디버거와 이 앱 안의 WebView 컴포넌트에 띄워진 Webapp의 디버거를 같이 띄울 수 있는 방법이 있을까요???

codejong · 11월 21, 2018, 5:34오전

어제 이것 까지 설명해야겠다 생각 했었는데 깜박했네요. ㅎㄹ
ios 시뮬레이터나 ios 디바이스를 연결한 경우 사파리 개발자 메뉴에서 손쉽게 확인할 수 있습니다.

안드로이드의 경우는 chrome을 통해 가능해요.

잠깐 유튜브 검색해보니 다음 영상이 그걸 설명하고 있네요.

rnejrl123456 · 11월 21, 2018, 5:57오전

와아 ios 시뮬레이터로는 사파리로 가능하군요! 지금 크롬 remote devices로 해결해보려고 하고 있었는데… ㅋㅋㅋ 감사합니다!!!

rnejrl123456 · 11월 21, 2018, 6:43오전

안드로이드, chrome으로 끙끙대고 있었는데, ios랑 사파리로 하니 바로 되네요 ㅠㅠ 사랑합니다 종은님!

codejong · 11월 21, 2018, 11:25오후

도움이 되었다니 다행입니다.

android의 경우는 native 속성에서 setWebContentsDebuggingEnabled 를 지정해줘야 합니다. 다음 글을 참고하세요. 이 속성은 project의 build.gradle 에서 minSdkVersion=19 이상으로 지정해야합니다.

github.com

react-native-community/react-native-webview/blob/master/docs/Debugging.md

# React Native WebView Debugging Guide

Here are some helpful React Native WebView debugging tips.

## Debugging WebView Contents

### iOS & Safari

It's possible to debug WebView contents in the iOS simulator or on a device using Safari Developer Toolkit.

#### Steps:

1. Open Safari Preferences -> "Advanced" tab -> enable checkbox "Show Develop menu in menu bar"
2. Start app with React Native WebView in iOS simulator or iOS device
3. Safari -> Develop -> [device name] -> [app name] -> [url - title]
4. You can now debug the WebView contents just as you would on the web

##### Note:

When debugging on device you must enable Web Inspector in your device settings:

This file has been truncated. show original

rnejrl123456 · 11월 22, 2018, 12:10오전

아 제가 이 부분을 몰라서 헤매고 있던 거였네요…! 감사합니다 오늘도 배워갑니다