search

ptmt / react-native-macos

[deprecated in favor of https://microsoft.github.io/react-native-windows/] React Native for macOS is an experimental fork for writing desktop apps using Cocoa
MIT License
11.25k stars 429 forks source link

react-devtools & console.log #212

Open jerrygreen opened 5 years ago

jerrygreen commented 5 years ago

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

Environment:
  OS: macOS 10.14
  Node: 9.3.0
  Yarn: 1.6.0
  npm: 6.4.1
  Watchman: 4.9.0
  Xcode: Xcode 10.0 Build version 10A255
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: Not Found

Target Platform: macOS 10.14

Steps to Reproduce

  1. Build a new app from scratch:
react-native-macos init Test
cd Test
react-native-macos run-macos
  1. Add console.log to, for example, render function of App.js:
console.log('Oh my log!')
  1. Now use standalone devtools (I suppose you already have it):
react-devtools
  1. Open devtools and its console:

Expected Behavior

I expect to see my console.log output, i.e. "Oh my log!"

(Do I misunderstand something?)

Actual Behavior

I don't see my logs, just:

[React DevTools] Connected
[React DevTools] Connection to RN closed
[React DevTools] Connected
[React DevTools] Connection to RN closed
[React DevTools] Connected

Obviously, "Connection to RN closed" because of refreshing. But where's my "Oh my log!"?

image

Reproducible Demo

The example is very simple, I don't think it's really needed (I'm almost sure I misunderstand something, something obvious?)

jerrygreen commented 5 years ago

Trying to predict your next question:

"Does it work with google chrome, with localhost:8081/debugger-ui?"

And my answer is - I don't know, because it can't connect, its status is always "Waiting":

image
jerrygreen commented 5 years ago

And what's about this:

$ react-native log-ios
$ react-native log-android

Why don't we have something like react-native-macos log-macos?

ptmt commented 5 years ago

react-native-macos log-macos requires some additional work, nothing to hard, contributions are welcome. This was not a production-ready project, so I never ported that command.

And my answer is - I don't know, because it can't connect, its status is always "Waiting":

This totally a bug. Do you have opened Xcode with enabled Debug Area and Console?

image

jerrygreen commented 5 years ago

@ptmt yea, I tried to open xcode project instead of running react-native-macos run-macos

I have logs there - but it's too verbose. I'm getting all the data and logs of react-redux, redux, redux-actions, redux-form, etc. It's all just raw plain text, not like js logs in chrome

So there's no grouping so all the objects / all the data / all the messages - they are all together

So I can't read this, it's too verbose

Any ideas how to get this working in chrome / react-devtools / how to debug this?

aleclarson commented 5 years ago

Note: To use http://localhost:8080/debugger-ui, you must first press ⌘+D to add a "React Native" submenu to [NSApp mainMenu]. Then you must either press ⌘+shift+R or click the "React Native > Debug JS Remotely" button.