# debug-webviews.mo

## Owner: [Louis Zawadzki](https://github.com/louiszawadzki)

## Prerequisites

* [ ] A React Native application with a WebView
* [ ] Safari if you want to debug on an iOS device

## Steps iOS *(\~2min)*

* Run your app on your iOS simulator
* Open Safari
* Enable the "Develop" menu:
  * Pull down the "Safari" menu and choose "Preferences"
  * Click on the "Advanced" tab
  * Check the box next to "Show Develop menu in menu bar"
* Pull down the "Develop" menu
* Click on "Simulator" that should be right below your computer
* Select your WebView in the menu  

## Steps Android *(\~3min)*

* In your `android/app/src/main/java/com/applilabchatbot/MainApplication.java` add `import android.webkit.WebView;` in the imports and the following line in your `onCreate` method:

```java
@Override
public void onCreate() {
  super.onCreate();
  SoLoader.init(this, /* native exopackage */ false);
+ WebView.setWebContentsDebuggingEnabled(true);
}
```

* Launch your app
* Open Chrome
* Go to <chrome://inspect>
* Select your WebView under your device name

### Common WebViews pitfalls

* To inject Javascript you have to set your WebView's `javaScriptEnabled` prop to `true`
* On Android, you can't use arrow functions in the injected javascript
* `window.postMessage` might not be available straight away in your injected Javascript, to make sure it's the case you can wrap your injected code by a setTimeout like this:

```javascript
setTimeout(function() {
  /* your injected js goes here */
}, 0)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bamtech.gitbook.io/dev-standards/react-native/debugging/debug-webviews.mo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.