Enable remote debugging on chrome for React Native's webviews

In my last post I explained how you can hack on react native for android locally, so that if you need any change to the java packages1 you can do it yourself, with immediate feedback upon a react-native run-android.

One thing I immediately patched was the ability to enable remote debugging on webviews, which is turned off in react native — and here’s how you can do the same.

If you look at the ReactWebViewManager.java you immediately notice that debugging is commented: this is because it needs to be enabled on the UI thread, else android is funny enough to crash the application through a RuntimeException. Putting it in a static initializer makes it run on any thread that requires this class, which is why is disabled.

At the same time, you can just move it around to have it enabled in your dev environment; just place the line that enables debugging in the onPageStarted method:

1
2
3
4
5
6
7
8
9
10
@Override
public void onPageStarted(WebView webView, String url, Bitmap favicon) {
  super.onPageStarted(webView, url, favicon);
  mLastLoadFailed = false;

  ReactContext reactContext = (ReactContext) ((ReactWebView) webView).getContext();

  WebView.setWebContentsDebuggingEnabled(true);

  ...

and, after re-running react native run-android, you should be good to go:

Other stuff like live screencasting work as expected:

Sweet!

Notes
  1. BTW hey, it’s 2016 and Java is still a thing!

Hi there! I recently wrote an ebook on web application security, currently sold on leanpub, the Amazon Kindle store and gumroad.

It contains 160+ pages of content dedicated to securing web applications and improving your security awareness when building web apps, with chapters ranging from explaining how to secure HTTP cookies with the right flags to understanding why it is important to consider joining a bug bounty program.

Feel free to skim through some of the free chapters published on this blog and, if the content seems interesting enough to you, grab a copy on leanpub, the Amazon Kindle store, gumroad or simply checkout right down below!

Buy the Web Application Security ebook for $9.99

In the mood for some more reading?

...or check the archives.