The core logic of my React Native app involves using WebViews because I need to access the HTML5 canvas. Whilst developing this code, there are bound to be errors and issues with the WebView code. Figuring out how to debug code within the WebView isn’t so obvious.
Alternatively, you can access this page using the React Native Debugger page in chrome.
So, I have found that the closest way to debug the WebView is to use the console.log statements that will appear in the DevTools console. In the normal React Native debugger console, you won’t be able to see any console.log statements from the WebView. You can only view them by exploring DevTools for Remote devices. As far as I can tell, you cannot use breakpoints in WebViews, but this is still better than nothing.
Make sure to do this on the same machine/host that is running the emulator. For example, a Genymotion VM is running on my Windows machine, but I can still see it’s WebViews on the Chrome inspect URL. This can be seen in Figure 3.