Browse Source

Add debugging guide to docs (#94)

Ryan Linton 6 years ago
parent
commit
72f39885c0
1 changed files with 48 additions and 0 deletions
  1. 48
    0
      docs/Debugging.md

+ 48
- 0
docs/Debugging.md View File

1
+# React Native WebView Debugging Guide
2
+
3
+Here are some helpful React Native WebView debugging tips.
4
+
5
+## Debugging WebView Contents
6
+
7
+### iOS & Safari
8
+
9
+It's possible to debug WebView contents in the iOS simulator or on a device using Safari Developer Toolkit.
10
+
11
+#### Steps:
12
+
13
+1. Open Safari Preferences -> "Advanced" tab -> enable checkbox "Show Develop menu in menu bar"
14
+2. Start app with React Native WebView in iOS simulator or iOS device
15
+3. Safari -> Develop -> [device name] -> [app name] -> [url - title]
16
+4. You can now debug the WebView contents just as you would on the web
17
+
18
+##### Note:
19
+
20
+When debugging on device you must enable Web Inspector in your device settings:
21
+
22
+Settings -> Safari -> Advanced -> Web Inspector
23
+
24
+### Android & Chrome
25
+
26
+It's possible to debug WebView contents in the Android emulator or on a device using Chrome DevTools.
27
+
28
+1. You will need to make the following change to `MainActivity.java` to enabled web contents debugging:
29
+```java
30
+  import android.webkit.WebView;
31
+
32
+  @Override
33
+  public void onCreate() {
34
+    super.onCreate();
35
+	  ...
36
+    WebView.setWebContentsDebuggingEnabled(true);
37
+  }
38
+```
39
+2. Start app with React Native WebView in Android emulator or Android device
40
+3. Chrome -> DevTools -> Menu (3 dots) -> More tools -> Remote devices
41
+4. Select your device on the left and select "Inspect" on the WebView contents you'd like to inspect
42
+5. You can now debug the WebView contents just as you would on the web
43
+
44
+##### Note:
45
+
46
+When debugging on device you must enable USB debugging in your device settings:
47
+
48
+Settings -> System -> About Phone -> Developer options -> enable USB debugging