Learning React Native

Chapter 8. Debugging and Developer Tools

As you develop your own applications, chances are that something will go wrong along the way. When it’s time to debug your applications, we happily have some React Native-specific tools that will make the job easier. There are also some nasty bugs that can crop up at the intersection of React Native and its host platform, which we’ll take a look at, too. In this chapter, we’ll dig into common pitfalls of React Native development, and the tools you can use to tackle them. And because any discussion of debugging would be incomplete without reference to testing, we’ll also cover the basics of getting automated testing set up for your React Native code.

JavaScript Debugging Practices, Translated

When working with React for the Web, we have a number of common JavaScript-based tools and techniques to help us debug our applications. Most of these are also available for React Native, though occasionally with some minor adjustments. React Native gives us access to the console, debugger, and React developer tools that we’re accustomed to using, so debugging JavaScript-based issues in React Native should feel familiar.

Activating the Developer Options

In order to avail yourself of these tools, you’ll need to enable Chrome Developer Tools in the in-app developer menu (Figure 8-1). This menu can be accessed by pressing Command+Control+Z in the iOS simulator, pressing the hardware button on Android, or by shaking your device. From there, you can select ...