|  | @@ -0,0 +1,48 @@
 | 
	
		
			
			|  | 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
 |