chore(docs): Adds some simple webview JS debugging tips (#1969 by @jamonholmgren)

[skip ci]
This commit is contained in:
Jamon Holmgren 2021-05-07 17:16:07 -07:00 committed by GitHub
parent e6d6828645
commit 89fd2db39b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 0 deletions

View File

@ -2,6 +2,47 @@
Here are some helpful React Native WebView debugging tips.
## Script Errors
It can be difficult to debug syntax errors and other script errors in WebView, since errors don't show up in a console by default.
One option (if you're loading HTML from an external source) is to inject an error handler before the content is loaded.
```js
<WebView
injectedJavaScriptBeforeContentLoaded={`
window.onerror = function(message, sourcefile, lineno, colno, error) {
alert("Message: " + message + " - Source: " + sourcefile + " Line: " + lineno + ":" + colno);
return true;
};
true;
`}
source={{
uri:
'https://bl.ocks.org/jamonholmgren/raw/48423fd99537283beace1daa2688e80f/',
}}
/>
```
This will provide an Alert box with (hopefully) useful debugging information.
If you're injecting JavaScript, this may fail with `Script error` and no other useful information. One simple way to debug this is to wrap your injected JavaScript in a try/catch, like so:
```js
const js = `
try {
// your code here
} catch(e) {
alert(e)
}
true;
`;
```
This will bring up an alert with the error message, which may or may not be helpful.
If these two simple methods fail to uncover the bug, try using the next technique!
## Debugging WebView Contents
### iOS & Safari
@ -28,6 +69,7 @@ Also, if you don't see your device in the Develop menu, and you started Safari b
It's possible to debug WebView contents in the Android emulator or on a device using Chrome DevTools.
1. You will need to make the following change to `MainApplication.java` to enabled web contents debugging:
```java
import android.webkit.WebView;
@ -38,6 +80,7 @@ It's possible to debug WebView contents in the Android emulator or on a device u
WebView.setWebContentsDebuggingEnabled(true);
}
```
2. Start app with React Native WebView in Android emulator or Android device
3. Chrome -> DevTools -> Menu (3 dots) -> More tools -> Remote devices
4. Select your device on the left and select "Inspect" on the WebView contents you'd like to inspect