Debugging A React Native WebView

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. Option 1: Chrome Inspect Start your Expo/React Native app*. Open and chrome and then go to the following URL, chrome://inspect. Then click on the inspect button, click the top link to open the latest WebView, you should see something similar to Figure 2....

Debugging React Native apps in WebStorm and Visual Studio Code

Visual Studio Code and WebStorm are two popular editors for developing React Native/Expo apps. These editors have lots of useful features, such as syntax highlighting, git integration and auto completion. However working out to debug Expo apps can be a bit confusing. One of the main advantages of working in an editor/IDE (let us be honest Visual Studio Code is pretty close to an IDE) is being able to use a debugger (and breakpoints) to go through your code line by line and see which part of your code is not running as expected....