When enabling "Debugging" in the ios simulator and open chrome for debugging.
The first time works perfectly but when change code and refresh automatically.
After that Debugging points somewhere else. I understand there is a mapping issue while debugging.
Any solution for this?
Debugging mapping attached to the project when we start project or reload but at the time of hot reloading (auto refresh) will not update that mapping correctly.
For update the mapping correctly you have to reload it.
In physical devices: Shake the device it will open a window choose 'reload' option.
For simulator: by pressing command+R or command+control+z and choose 'reload' option.
For emulator mac OS: by pressing r+r (2 times).
In chrome developer tools, try switching to network tab, and check "Disable cache". It might help
Related
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 :(
I guess that I've tried every solution that exists on the internet about this issue, and nothing works, and I don't even know where to look anymore. It started to happen from nowhere and I can't even open the app settings shaking the phone, it's completely stuck on this screen.
I cleaned up NPM, Yarn, Expo's caches and disabled the Remote Dev Tools.
I would be so much thankful for any help.
In my case it was due to the a remote debugger.
I left the remote debugging on, put the mac in sleep and when I turned it on again the iOS Simulator remained stuck at bundling 100%, irrespective of what I've tried (kill simulator, expo r -c, Reload app, etc.)
However, I could have realized the root cause earlier because on the physical device it was working the entire time.
Hope this saves someone some time.
You could try reverting to your last known working commit, then incrementally adding back the changes until this happens again. This often is a result of delaying hiding the splash screen (perhaps via AppLoading or SplashScreen) and then not hiding it because of some error in the app code preventing the code to hide it from being called.
Try Disable Debug Remote JS in the IOS Simulator
by clicking ctrl + cmd +Z on Mac
It works for me.
Seems like something is wrong with the dependencies, just close down the react-native environment ( android studio) and your IDE, just closing and restarting may work if not, check for updates or delete and reinstall your dependencies ( expo i )
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.
I keep my project(s) relatively up to date with the latest RN releases. This error seems to be coming up more and more lately.
Error: Unable to resolve module `./debugger-ui/debuggerWorker.d9da4ed7` from ``:
None of these files exist:
* debugger-ui/debuggerWorker.d9da4ed7(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
Really makes it hard when trying to debug issues and a debugger statement does noting and errors are not reported to the browser tab where the console output goes.
I've already tried wiping node_modules. Is this a known issue with a concrete fix available?
Got stuck with this exact issue for hours. Just found that this occurs only on device where app is already installed with debug mode enabled.
I fixed it by:
uninstalling manually app from device (cmd+H to display simulator home) then long click on app icon and click on cross to delete app => this forces disabling debug mode,
then run app again from xcode.
Enabling debug mode after that works normally.
I had to come across a similar issue after updating #react-native-community/cli-debugger-ui to 4.2.1. Tried out several methods, nothing worked. Reverting #react-native-community/cli-debugger-ui back to 3.0.0 resolved the issue for me.
I closed the app (pressing home twice and swiping up), then started it again from the simulator and it worked.
Happens to me recently using expo and android.
The solution was to clear all Expo Go data:
Long press the Expo go icon
Then select App info
At the bottom of the screen, press Clear Data
And press Clear all data
Relaunch expo go and the react native app
I use Chrome Debugging and Live Reload to debug React Native applications.
Whenever you save a file, the Chrome screen reloads and in doing this, gets focus. This is annoying. Is there anyway to disable this focusing behaviour?
The Chrome debug page is opened by the launchChromeDevTools.applescript script in the react-native package.
You can disable it grabbing the focus by opening this file in your project:
./node_modules/react-native/packager/launchChromeDevTools.applescript
and commenting out the activate line by inserting -- in front.
(This annoyed me enough to hunt down how to do it; it might be worth filing an issue on react-native to make it an option).