CODEWITHSUNDEEP
javascriptreactjsreact-nativedeveloper-tools
Mark Amery
Mark Amery

Reputation: 154954

View component hierarchy in React Native

When debugging a React website, I can view the component hierarchy using the React Developer Tools:

picture of React devtools

How can I do the same in React Native? The rage shake menu contains an 'inspector' but it only seems to let me inspect a single element by tapping it - I don't see any way to browse the full component hierarchy.

Upvotes: 6

Views: 4184

Answers (2)

Eliot
Eliot

Reputation: 5659

This works for me using the standalone react-devtools app with React Native 0.55.

  1. Run npm install -g react-devtools
  2. Run react-devtools
  3. Open React Native app and select "Start Remote JS Debugging" from dev menu

Upvotes: 1

Almouro
Almouro

Reputation: 6524

Unfortunately, since version 0.12 of react-native, the Devtools "React" Tab does not work anymore. It's a known issue.

There's a quite active discussion on Github that has been open for a while, but no solutions yet.

UPDATE

The Devtools "React" tab still don't work in Chrome, but the latest Nuclide has it built in! (It's an IDE built on top of Atom).

With Atom installed with the Nuclide package, start your app and deactivate chrome or safari debugging.

Then, pressing Cmd+Shift+P in Atom will trigger the command palette and you can toggle the dev tools by searching for React Native Inspector:

Inspector

Upvotes: 5

Related Questions