Document how to debug webview JavaScript in iOS using Safari Developer Menu

[jamonholmgren]

We should document how to use Safari to debug the webview's JavaScript as described here:

https://stackoverflow.com/a/20233054

After consulting with an esteemed colleague today he alerted me to the Safari Developer Toolkit, and how this can be connected to UIWebViews in the iOS Simulator for console output (and debugging!).

Steps:

Open Safari Preferences -> "Advanced" tab -> enable checkbox "Show Develop menu in menu bar"
Start app with UIWebView in iOS Simulator
Safari -> Develop -> i(Pad/Pod) Simulator -> [the name of your UIWebView file]
You can now drop complex (in my case, flot) Javascript and other stuff into UIWebViews and debug at will.

EDIT: As pointed out by @Joshua J McKinnon this strategy also works when debugging UIWebViews on a device. Simply enable Web Inspector on your device settings: Settings->Safari->Advanced->Web Inspector (cheers @Jeremy Wiebe)

UPDATE: WKWebView is supported too

[ryanlntn]

It might be cool if we provided a script to quickly open that. Similar to Ray’s https://github.com/rhdeck/react-native-xcode

Looks like you just need to add:

"rnpm": {
  "plugin": "plugin.js"
}

To the package.json to add scripts to react-native-cli.

[jamonholmgren]

Something like react-native webview-debug ?

[ryanlntn]

Yeah exactly. Not sure if we have a similar capability for Android or not. I would have to investigate.

[jamonholmgren]

Love that idea.

[Titozzz]

Oh on android there's a line to add in your MainApplication.java and you can then debug using remote devices in chrome.

  import android.webkit.WebView;

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

[lyseiha]

@Titozzz after put that, how to get console out, bro?

[lucasocon]

I'm looking for a similar way to do that in iOS, like android but I cannot find it :/