[Misc] Debugging React Native in browser

[ladas-larry]

The good thing about front-end web technologies is that there are a lots of people who know how to quickly debug them just in the browser using DOM inspector. What is the point about making mobile application with CSS, if I can't use the benefit of DOM inspector? Alright, I can just follow the docs + common sense and hope that everything will always just work, but there will be for sure situations where inspecting CSS might be really helpful. There are already toolkits out there (Cordova/Ionic), where you can run your mobile app directly in the browser and debug it from there.

So we need to be able to open React Native app in the browser, develop it from there, and then run it in xCode. That would probably mean to incorporate React.js components to substitute React Native component's inside browser, using some CSS/JavaScript similar to what http://touchstonejs.io/ or http://www.idangero.us/framework7/ are making.

[brentvatne]

The good thing about front-end web technologies is that there are a lots of people who know how to quickly debug them just in the browser using DOM inspector. What is the point about making mobile application with CSS, if I can't use the benefit of DOM inspector? Alright, I can just follow the docs + common sense and hope that everything will always just work, but there will be for sure situations where inspecting CSS might be really helpful.

I would argue that is not the good thing but one of the good things about it. You get many benefits of using CSS-like styles in React Native 😄 - such as familiar syntax, Flexbox layout, etc. Additionally, inspecting CSS should be much less of an issue in React Native where you must use inline styles, because you don't have to worry about the cascade - so you should just be able to look at your component file and see the styles right there.

That said, inspecting elements is certainly useful and efforts are underway to add an element inspector to React Native. You can try it right now by installing from master npm i facebook/react-native#master --save. You can expect it to become more fully featured over time!

There are already toolkits out there (Cordova/Ionic), where you can run your mobile app directly in the browser and debug it from there.

This works fantastic for them, and the reason is that the only context the app ever runs in is inside of a browser, so whether that's a WebView on an iPhone in Chrome, it's the same thing. React Native does not run inside of a WebView - you are interacting with real native UI components.

So we need to be able to open React Native app in the browser, develop it from there, and then run it in xCode. That would probably mean to incorporate React.js components to substitute React Native component's inside browser, using some CSS/JavaScript similar to what http://touchstonejs.io/ or http://www.idangero.us/framework7/ are making.

As far as I know, this is not on the roadmap. You're more than welcome to investigate yourself and try to make this work!

[brentvatne]

cc @vjeux

[brentvatne]

@Dharmoslap - #182

[brentvatne]

@Dharmoslap - also see #770

[vjeux]

@brentvatne: can you consolidate all those issues into one that's about implementing core components on web? Not going to happen anytime soon but should be tracked somewhere

[brentvatne]

Consolidating this issue into #182 😄