chore(docs): Adds some simple webview JS debugging tips (#1969 by @jamonholmgren)
[skip ci]
This commit is contained in:
parent
e6d6828645
commit
89fd2db39b
|
@ -2,6 +2,47 @@
|
||||||
|
|
||||||
Here are some helpful React Native WebView debugging tips.
|
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
|
## Debugging WebView Contents
|
||||||
|
|
||||||
### iOS & Safari
|
### 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.
|
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:
|
1. You will need to make the following change to `MainApplication.java` to enabled web contents debugging:
|
||||||
|
|
||||||
```java
|
```java
|
||||||
import android.webkit.WebView;
|
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);
|
WebView.setWebContentsDebuggingEnabled(true);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Start app with React Native WebView in Android emulator or Android device
|
2. Start app with React Native WebView in Android emulator or Android device
|
||||||
3. Chrome -> DevTools -> Menu (3 dots) -> More tools -> Remote devices
|
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
|
4. Select your device on the left and select "Inspect" on the WebView contents you'd like to inspect
|
||||||
|
|
Loading…
Reference in New Issue