How it works...

First, run your app with the following command:

npm start

On your device (whether real or emulated), access the developer menu by shaking (on an actual device) or using command + m for macOS or Ctrl + M for Windows or Linux. At the very least, you want to enable remote JS debugging:

Using the device's developer menu to enable remote JS debugging

Now, open the react-native-debugger app by clicking on the executable you downloaded. If nothing happens, even after reloading the app, then the problem is surely due to a different port being set: in the menu, select Debugger, then New Window, and pick port 19001, and everything should be fine. When you start the app, it should look like the following screenshot. Notice all our logs on the right of the screen, the first Redux actions in the top left, and the React tools in the bottom left (and if you don't care for some of these tools, right-click on the screen to hide any of the three):

Upon successful connection, you'll see the three tools in react-native-debugger running at once

If you check the Network tab, you'll see that the API calls from the app don't appear by default. There's a simple workaround for this: right-click on react-native-debugger, choose Enable network inspection, then right-click on the Chrome Developer tools and select Log  XMLHttpRequests, and all calls will appear:

API calls are not displayed by default, but can be enabled by right-clicking on the react-native-debugger screen

You can also inspect AsyncStorage—see the following screenshot. I opted to hide React and Redux DevTools, as I mentioned previously, just for clarity. Since our app doesn't actually use AsyncStorage, I fudged it a bit: note that you can use a require() function on any module, and then use it directly:

Examining AsyncStorage with the RN debugger

What else can we say? Not much, actually, since these tools are basically the same that we saw when using React for the web. The interesting detail here is that you get all of them together, instead of having to deal with many separate windows. Let's finish this chapter by considering an alternate tool, which you might just happen to prefer.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.51.117