debugging.md

Debugging

React Native relies on the debugger that’s part of the Chrome Developer Tools. To enable it:

1. Run the app in the simulator.
2. Simulate a ‘shake’ event (^⌘Z), which will bring up the dev menu.
3. Choose the ‘Debug JS Remotely’ option, which should open Chrome.
4. In the new Chrome window, open the Developer Tools (⌘⌥J).

Breakpoints

Dynamic

To set breakpoints from the Chrome Developer Tools, open the ‘Go to source’ menu (⌘P), search for the file you’d like to set a breakpoint in, and set the breakpoint by clicking the gutter bar at the desired line.

From code

In some situations that require very specific conditions, it’s easier to break by inserting an instruction in your code. For this you can use the debugger keyword, e.g.

if (someCondition && anotherCondition) {
  debugger
}

All exceptions

It’s possible to break on any thrown exception by selecting ‘Pause On Caught Exceptions’ from the ‘Sources’ tab.

GraphQL queries

Relay will log debugging info for each query it performs in the ‘Console’ tab:

However, like any other networking, the raw request/response information can be made available from the ‘Network’ tab by enabling the Network Inspector from the React Native Debugger app’s contextual menu:

If you need to debug the query, copy the query and variables into GraphiQL (sometimes it’s easier to copy these values by clicking ‘view source’ next to the ‘Request Payload section):

Standalone debugger app

You can use React Native debugger which is a standalone app to inspect views as well as the standard Chrome Dev Tools. It is highly recommended over the normal Chrome Dev Tools.

1. Install RN debugger: $ brew update && brew cask install react-native-debugger.
2. There is no step 2. Now when you run $ yarn start it will automatically use the standalone app.