Before Im posting this question, I've tried to look up for answers on google but I could not find the solution to this problem.
I'm developing a react native application, I use redux and react native debugger to check my console and my state.
The issue that I am facing right now is my application wont update to latest changes when expo is debugging the application remotely using React Native Debugger.
Lets say I have a main screen with text "Hello World" and I change my code to "Hello Me", and when I refresh the expo/app, it is still Hello World. I've tried to reset cache, delete expo, recompile but nothing works. I have to disable remote debugging in expo in order to see any changes related to my code.
Does anyone have any idea how to solve this ?
The issue is with React Native Debugger. There is a bug that is likely related to React Native 0.61 and the "fast refresh" feature that is causing the debugger to load stale JS code.
To fix the issue click on the "Network" tab in the debugger and check the "disable cache" option. Now you should see your changes work.
For more info check this out:
https://github.com/jhen0409/react-native-debugger/issues/423
I had this problem using Expo
I managed to solve it, move the device until the settings appear, then disable the "Debug Remote JS" option.
Related
When I run Lighthouse for the project I am working on, I get
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js
as no1 causer of unused JS.
How is that making sense from a performance optimization perspective?
I can't control what extensions the user runs in his browser.
I also can't find anything about the React dev tools in the project.
Would highly appreciate if someone could shed some light on that issue.
I found the issue is because the file of the devTools is installed when the page is loading... and it is useless in production mode.
So go to the extension and right click on it.
Then go to the manage extensions.
Then find the "Allow this extension to read and change all your data on websites you visit" change it to "on click".
Not sure if anyone had this problem, since I could not look it up anywhere but I cannot see any logs for react native app because the browser console tells me that "Another debugger is already connected" its a warning that keeps looping.
Metro bundler is telling me that I have to see the javascript logs in the browser. I cannot work on my app without debugging it, can anyone help ?
This happens if you have another tab opened at http://localhost:8081/debugger-ui as you can only have one instance of the debugger running.
You could either go back to the already running tab and see the logs there or close the other tab and refresh this one.
I'm new in react native development. The first issue i faced is that i didn't found the way to inspect my ui elements.
I am using expo-cli to run react native app in my android phone.
and I didn't found the way to debug or inspect my ui elements.
Can anybody Please help me regarding this.
because i think there is definitely a way to inspect ui-elements in react native as we do for react-web-app with chrome inspector tools.
You can use Developer Mode
React Native includes some very useful tools for development: remote JavaScript debugging in Chrome, live reload, hot reloading, and an element inspector similar to the beloved inspector that you use in Chrome. It also performs bunch of validations while your app is running to give you warnings if you're using a deprecated property or if you forgot to pass a required property into a component, for example.
a link with a detailed description of this
While using the application, if there is a react-native 'modal' opened. I need to explicitly close it before refreshing the app. Else it would stay open and I have restart the app to close it.
It is known bug which happens during development only. Don't worry about it, It won't happen in production app
This is a known bug in react-native, more info here
Based on the discussion in the GitHub thread, looks like the solution is not to be expected soon.
I started exploring react-native. One thing which I want is should able to debug my app from chrome. I am having prior experience to cordova. Cordova renders app in chrome web view. I understand that with react-native it is not possible because react-native doesn't render app on web view.
There is an option react-native "debug in chrome". When I click this option, attached screenshot is getting opened. I enabled "pause on exception."
But nothing is happening. I am unable to see my app code at all.
I like to do step by step debugging. Is it possible? If so can some one tell how to do this?
You can definitely examine the source code, set breakpoints, etc in Chrome.
In the Sources menu, select debuggerWorker.js and then you should be able to see your project tree.
Any console.log in your code will print to the browser too. But I find the breakpoint inspection most helpful.
this is simple as you were doing in cordova.
try to put debugger; statement in your code while in debug mode.
It will set the breakpoint and you can then debug your application. No need to find out your files in debuggerWorker.js