React Native debugging tips

Developing applications in React Native is great, but in any real environment you will spend a large majority of your time debugging. Even though you are dealing with a mix of JavaScript and native app code, you can still get a great debugging experience if you know where to look.

Breakpoints and Stepping through code in Chrome Dev Tools

Did you know that not only can you use Chrome to view console messages and log data, but you can also access nearly the full power of the Dev Tools to set breakpoints and step through code?

Make sure that you’ve turned on “Debug in Chrome” from the dev menu in your app and open up the Dev Tools in Chrome. The Dev Tools will load up your applications JS source using source maps supplied by the packager. Go to the Sources tab of the Dev Tools, and expand the debuggerWorker.js resource on the lefthand side. Under localhost:8081 you should see your application’s source, which has been reduced to just the required and imported code.
From this point you can set breakpoints, step through code, set watches, etc. It will also allow you to step through and understand the FB react-native code as well. The day I discovered this (admittedly too long after I started RN development) was a victorious day.

Disabling certain warnings

The yellowbox warnings supplied by React Native are incredibly useful and often alert you of something that is both easy and important to fix. Pay attention to them and your final product will turn out better.

However, there is occasion when a warning can just get in your way. As an example, in an application I am developing I use a View that sits transparently on top of a beautiful background image, and some of the components on that view use shadows. Doing so makes it more difficult for RN to draw the shadows because it has to re-evaluate and redraw the component as it passes over the image during transitions, which it rightly warns about. But in this case as tested on real devices, the impact was negligible and the effect very attractive. Furthermore, these warnings pop up and stay on the screen until dismissed, which is distracting and sometimes in the way as I test deeper navigation points in the app.

You can instruct RN to not display yellow box warnings on a per-message basis. To do so, add a string matching the message (or at least a unique first chunk of the message) to the console.ignoredYellowBox array near the root of your application. Behind the scenes, RN does a

warning.startsWith([your message])

to check if it should ignore displaying a matching message. For example, to remove the warning in the screenshot above:

index.ios.js:
 
import React, { AppRegistry } from 'react-native'
 
...
console.ignoredYellowBox = ['View #']...
AppRegistry.registerComponent('OApp', () => App)

A word of caution of course: if you ignore the warnings you had better understand the impact, and it might be wise to turn them back on at some point!