1

I'm running a React Native app in the iPhone simulator on macOS and I've been able to get standalone react-devtools to work but I haven't found a way to get browser devtools style/CSS editing to work. It seems this app only provides access to the Components and Profiler tabs, which makes sense.

As stated in this related question, "when trying to [access styles and CSS editing devtools] using the react-devtools extension on the browser (Chrome, Safari, or Firefox) I only get access to the console, because all the components and elements are the ones displayed in the devtools web-page".

Is it possible to inspect and update styles of my React Native application running in an iPhone simulator?

(if this is possible with the Android emulator then I'm interested in a solution for that as well)

Brady Dowling
  • 4,920
  • 3
  • 32
  • 62

1 Answers1

0

CSS inspecting and debugging is actually built-in to the standalone React Developer Tools and React Native Inspector, but it's not intuitive to find.

  • CSS styles are rendered below the normal React DevTools "props" panel for a component. So if you have a long prop list/devTools is in a small window, you may need to scroll down to see them.
  • Styles applied via a theme will not appear in the "style" panel, but rather under the style prop in the "props" panel.

Hopefully the screenshot will clarify a bit. Once you do find them, they're editable from the panel, just like in normal browser DevTools.

enter image description here

(I'm using the Android emulator, but in theory it should be the same for iOS.)

Andrew
  • 3,825
  • 4
  • 30
  • 44