React-native: can't debug webview in chrome

[chinachuner]

Description

I want to debug webview page on chrome use chrome://inspect/#devices ,but I can't see the page opend with webview.
but I can debug webview with safari on IOS

Reproduction

ref="webviewbridge"
onMessage={this.onBridgeMessage}
injectedJavaScript={js}
source={{uri:this.state.url}}
onLoadEnd={this._onLoadEnd}
onLoad={this._onLoad}
onError={this._onError}
onNavigationStateChange={this._onNavigationStateChange}
javaScriptEnabled={true}
/>

Additional Information

• React Native version: [0.38]
• Platform: [ Android]
• Operating System: [ MacOS]

[BogdanHossu]

I had also kinda the same issue as you, than I realised that the WebView appears on my Chrome Inspect if my device API is at least 19.

[megahertz]

I have the same problem on Linux

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

[urbananimal]

@hramos - I am also having this issue - I'm using -

React Native version: [0.43.1]
Device : [samsung galaxy j5, sony xperia z(x)]
Platform: [ Android - 6.0.1]
Operating System: [ MacOS]

I can debug using the emulator but the bug I'm trying to fix doesn't occur when running in the emulator.

I'm pretty sure I've read every piece of material available on the internet but I've got nowhere - Is this actually possible? has anybody done this? Can anybody point me in the direction of a solid step-by-step walkthrough to get webview debugging from an android device working?

Thanks.

[Traviskn]

I'm also running into this issue, I have no problems connecting the chrome debugger to a webview in the emulator, but when I run the app on a physical device the debugger cannot find the webview.

[samermurad]

I put
WebView.setWebContentsDebuggingEnabled(true); in the onCreate in the MainApplication file and it worked for me

[urbananimal]

This is what I've ended up doing too. Forgot to post my solution here. Seems like there should be a built-in build flag or something that sets this rather than having to manually add this line, or at least this should be documented.

[brancooo1]

+1 it should be flag to webview rn component
@urbananimal

[brancooo1]

currently in RNv0.49 in ReactWebViewManager seems it is allowed by default if DEBUG in SDK19^.
Although not working for me in SDK22

this part:

    if (ReactBuildConfig.DEBUG && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      WebView.setWebContentsDebuggingEnabled(true);
    }

in method:

  @Override
  protected WebView createViewInstance(ThemedReactContext reactContext) {
    ReactWebView webView = createReactWebViewInstance(reactContext);
    webView.setWebChromeClient(new WebChromeClient() {
      @Override
      public boolean onConsoleMessage(ConsoleMessage message) {
        if (ReactBuildConfig.DEBUG) {
          return super.onConsoleMessage(message);
        }
        // Ignore console logs in non debug builds.
        return true;
      }

      @Override
      public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
        callback.invoke(origin, true, false);
      }
    });
    reactContext.addLifecycleEventListener(webView);
    mWebViewConfig.configWebView(webView);
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setDisplayZoomControls(false);
    webView.getSettings().setDomStorageEnabled(true);

    // Fixes broken full-screen modals/galleries due to body height being 0.
    webView.setLayoutParams(
            new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT));

    if (ReactBuildConfig.DEBUG && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      WebView.setWebContentsDebuggingEnabled(true);
    }

    return webView;
  }

[natterstefan]

@brancooo1 I have the same issue, have you fixed it in the meantime?

@samermurad relatively new to react-native and apps in general, may I ask you to show us a sample code of the MainApplication.java? I am not sure which package I need to import first to get this working: Found an answer here on StackOverflow.

@Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    BackgroundTaskPackage.useContext(this); // github.com/jamesisaac/react-native-background-task#android
    WebView.setWebContentsDebuggingEnabled(true);
  }