React Native Debugger

React Native Debugger and Flipper; the evolution of debugging options at React Native.

React Native Debugger is a standalone app for debugging React Native apps. It provides a UI similar to Chrome's developer toolbar and has some tabs that are similar too, like Console, Sources and Network. So, coming from a web development background these will seem familiar.

However, the native debugger app has some very useful additional features, which we'll be looking at in this lesson.

First, we need to download it. Select the version based on your operating system from this page.

Elements / components tab#

The Elements tab is similar to the one in Chrome, though in React Native it works only while using this tool. We can navigate the app structure, the component hierarchy, search for elements, check their state, style, and so on, all from here.

What's interesting is that we can also change the styles of elements right here and that will be reflected in the simulator. This becomes very useful in making some changes and testing them on the go.

Sources#

This is the same as the Sources tab available in Chrome's developer tool as discussed here.

Profiler#

Start a new discussion. All notification go to the author.