| 
				
			 | 
			
			
				@@ -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 
			 |