every time I run my react project, I have hundreds of yellow warning coming on my Terminal. impossible to see any console.log()
I know, I am fixing them however it is talking time and I need to see a clean terminal when I am working on other thing.
I do no have a yellowwood on my simulated device as I disabled it using console.disableYellowBox = true;
I tried
YellowBox.ignoreWarnings(['Warning: ReactNative.createElement'])
console.ignoredYellowBox = ['Warning: ReactNative.createElement'];
``` in my index.js without success
I am using
react": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
Have you tried debugging your app through Google chrome?
You can do so by opening the dev menu by shaking your device or if you are using a simulator by pressing cmd+d or ctrl+cmd+z on iOS and double press m on Android and then select the Debug JS option.
This will open a tab in your browser pointing to http://localhost:8081/debugger-ui/
What this basically does is redirect all the JS files to run in your browser engine directly, that way you can add breakpoints in your code by using the word debugger and they will show up in your browser just as they would when developing for the web.
You can also use the console tab of your browser to visualize console.* messages and objects that might be hard to check when using only the terminal
There is one side note though, you shouldn't always rely on remote debugging as the chrome JS engine is used during debugging and it has some slight differences from the JavaScriptCore used otherwise. These differences are mainly related to the Date() object but you can read more about that here
Related
With old Android versions, app is so slow working when debug js remotely is active. Is there a way to see the logs which we have on Chrome ?
If Chrome is the issue, you can use React Native Tools Extension on Visual Studio. That way you can simply use VS code itself for reading logs.
EDIT: If putting Remote Debugger ON the issue, go ahead and use react-native log-android or react-native log-ios . Click here for more information on accessing console logs
You can use the server terminal for that, all consoles are going to be availabe there for you and you wont need to enable "debug remotly"
I upgraded a react native project recently from expo SDK 36 to 38. It compiles now, but anytime I click on "Debug Remote JS", it causes the UI to become slow and unresponsive, only occasionally picking up the on click events. I created a bare bones project to duplicate it. To verify, either run expo init from cli or here's a project https://github.com/seniordevops/tab-application.git. Click the tabs without the debugger on, then turn on debug remote JS and watch the slow down. Happens on both Mac and PC. Any ideas on the root cause?
This is mostly due to the fact that the clock on your PC and mobile are not synchronized.
You either have to synchronize them or have the phone clock one second earlier than your PC/Mac.
I suspect the reason could be an upstream problem of react-native. Please check this expo-cli issue:
https://github.com/expo/expo-cli/issues/2405
a maintainer reports:
when you are debugging on your device, the javascript is being
executed in your browser on your computer :(
In order to use React Native Debugger, I don't see the option 'Debug JS Remotely' when I open the Developer Menu both on my android simulator and my physical device, using expo. Tried both scenarios and no option for Debug JS Remotely...
(I originally wanted to use my external device with React Native Debugger and I can't find the setupDevtools.js file at node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js in order to update this file for use. I don't know if these two might be related, but also wanted to share)
Am I missing something? Thank you...
I guess the option Debug JS Remotely has been replaced by the option Debug with the latest version of react-native.
And If you want to use your external device with a debugger just shake the device and select the debug option from the developer menu.
But as #JoeBe suggested you should also look for an already open debugger and then try it.
You can also open the developer menu just by pressing d on node.js screen if you are using the latest version of react-native.
I had the same issue. But as it turns out, after terminating all other debuggers it was working with that Debug option as well.
So I have a React Native app based on react-native-firebase-starter that I'd like to debug using better tools than just console.log output via react-native log-android. Debugger breakpoints, object inspection etc.
For a standard React Native app, this would be possible using the "Debug JS remotely" option which, as I understand it, runs the app's JS inside desktop Chrome and hence can use it's dev tools.
This does not seem to work for React Native Firebase however. I presume this is because it uses a lot of native Android/iOS modules along with mobile-only Firebase auth, and thus is only happy running entirely on the device. ...or something like that.
Am I doing something wrong or is there a way round this? What debugging setup will give me the best DX here?
The example project react-native-firebase-starter is natively built (as opposed to being created with Expo) and will therefore work as expected with the debugging tools you have mentioned.
Make sure when running the app the build variant Debug is selected, as in Release mode Metro Bundler / Packager and the debugging tools are not available.
If the debugging level via Chrome Dev Tools does not suffice, there are other tools created for React Native with better functionality (such as breakpointing). The most notable ones are:
React Native Tools extension for Visual Studio Code. Allows setting breakpoints and iterating through code in the editor.
React Native Debugger, which has a similar interface to Chrome Dev Tools and allows breakpoints to be set in the Sources tab.
Up-to-date installation instructions and configuration are provided in their respective repositories.
Recently I switched from Ionic framework to vue-native (vue.js wrapper around react-native), everything seems to be cool, development is fast and easy, but I have some real issues with debugging those apps. With Ionic Framework (Cordova) I was able to open an app in web browser and could easily manage Vuex state (for example) from Chrome Console. It doesn't seems so easy and trivial in react native world. Is it possible to have similar debugging experience in vue-native? When my app starts to grow and gets complicated it's really hard to handle it other way around. Any help appreciated.
Basically all my problems gone away when I ported my apps to Expo (which allows for JS remote debugging) and grabbed React Native Debugger - https://github.com/jhen0409/react-native-debugger.
Important part is having simulator installed on your developer machine (like iphone simulator) because debugger doesn't play nicely with real machines.
Inside debugger hit cmd+t to open a new window and set port to 19001 (because of Expo using this port). Now start expo with npm start command and in Expo panel hit 'Run in simulator' button.
In simulator make a shake gesture (ctrl+cmd+z) and allow remote debugging in developer menu.
Done. Pleasant experience similar to one known from Cordova. You have a js console, you can inspect elements and change styles live. Expo comes with live reload to make things smoother.
More info here: https://docs.expo.io/versions/latest/workflow/debugging/
Unfortunately, you cannot debug script parts in the VUE files in Chrome Dev Tools (you can put the breakpoints, but they are not working well), but if you put the methods to a separate JS file, it works like a charm. I know, it's a workaround, but not a big pain, and working well.
See my TODO app for example: https://github.com/TheBojda/VueNativeTodo