Menu
Is it possible to visually inspect the DOM tree of a React Native app, in the way you can inspect a regular Web page in Chrome's Elements panel? If so, how?
618
By default, React Native supports ChromeDev tools through its remote debugging capability. When your app is running on Android Emulator, press Ctrl+M on Windows or Cmd+M on Mac to access the in-app developer menu. If it's running on a real device, then you just need to shake your device.
Approach 2: Use react-devtools This might work only with React Native 0.43 or higher. Install react-devtools as a dev dependency to your project. Run your react native app in the simulator, and open the UI Inspector. The simulator will automatically use react-devtools as the primary UI for the UI Inspector.
In App Developer Menu On Android emulator, you need to press command + M. Debug JS Remotely − Used for activating debugging inside browser developer console. Enable Live Reload − Used for enabling live reloading whenever your code is saved. The debugger will open at localhost:8081/debugger-ui.
The DOM (Document Object Model) represents the web page as a tree structure. Any piece of HTML that we write is added as a node, to this tree.
For something closer to Chrome DevTool's Element panel, try using react-native-debugger.
Works on: windows, osx and linux. It supports: react native and redux.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
