Changing code in .js files not updated in RND app: Caching issue?

[jan-happy]

React Native Debugger app version: 0.7.13 React Native version: 0.51.0 Platform: iOS Is real device of platform: No Operating System: macOS 10.13.2

When I make changes to files in my project these are not reflected in the "Sources" view of RND. I reloaded the app in the simulator and I disabled the cache in Developer Tools Settings (F1) but it does not help. This does not happen if I use the Developer Tools of Chrome to debug.

[jhen0409]

I've never encountered this problem, or I misunderstood this issue, could you provide a screenshot?

This may be a problem caused by older versions of Chrome. We've plan to upgrade the Electron version, but it may not be released too quickly, and it will not be the latest version of Chrome.

[jan-happy]

Sorry for my bad explanation. It's like back in the days, when you make changes to the source of your website and you reload the website in the browser but the browser does not show the changes you've made until you delete the cache and reload again. But here it's worse since deleting the cache does not help. You have to quit RND and restart it to see the changes you've made. Which is quite annoying.

[jhen0409]

I haven't the caching issue with same environment, could you try to Restore defaults and settings in devtools setting and restart RND?

[jan-happy]

I removed my src folder from the workspace in RND and now it seems to reload the files properly. Maybe adding a local source mapping caused the caching problem?

[wachunei]

I'm having this issue now, I've restarted RND and it is still using old versions of my components, it even keeps working after I completely remove a whole component from my filesystem.

None of the above has worked for me, is there any other way to force cache cleaning? I'd appreciate your help 🙏

[wurmr]

I ran into this problem as well. It seems like it is the cache setting inside of RND. I set Disable Cache in Settings->Preferences->Network and it fixed the problem for me.

[benevbright]

Same here, I lost a day to see what's happening here. I didn't even figure out that it was 'react-native-debugger's problem.

[benevbright]

Thanks @wurmr It works well as a workaround.

[jan-happy]

@wurmr I'm pretty sure I've always disabled the cache. But not that you mention it, I will give it another try.

[digitaldavenyc]

@benevbright & @wurmr Thank god I saw your posts or I might have lost a day on this too! Thanks

[Mark2xv]

Was seeing the same issue, disabling network cache in developer tools solved it.

[jhen0409]

I still cannot reproduce the problem, but I believe it can be easily fixed, like adding a timestamp in url of importScripts.

If someone is willing to try and confirm it is solved, please submit a PR or just let me know.

[jaycee425]

Disabling caching solved for me as well thanks @wurmr !

[jan-happy]

@wurmr Setting this option does NOT solve the issue for me (macOS 10.13.3). I can reload the app as often as I want, as soon as the source is linked in RND it does not refresh the changes I've made on disk. I have to remove the source folder from RND and only then it reloads properly.

[stigi]

I was happy to see the suggestions to disable network caching, but I still can confirm what @jan-happy is seeing. If I change on of my source files in Atom and reload the app in the iOS Simulator using Cmd+R the source doesn't update in RND. Breakpoints are all over the place as their position doesn't match with the code anymore.

RND v0.7.13, RN v0.51.0

[bramus]

Encountering the same issue today … all of a sudden RND keeps on showing old versions of components. When not enabling "Debug JS Remotely", or when letting Chrome handle the remote debugging I see up-to-date versions of my code.

So far I've:

• Cleared all watchman watches
• Restarted RND
• Restarted the packager
• Restarted the packager with --reset-cache
• Restarted Simulator
• Ran rm -rf $TMPDIR/react-*
• Ran rm -rf ~/Library/Developer/Xcode/DerivedData/*
• Reinstalled my node_modules
• Reinstalled my node_modules after running yarn cache clean first
• Recompiled the app
• Rebooted my MacBook

None of those helped. Even after rebooting my MacBook (!) the React Native Debugger keeps on showing an old version … 🤔

[bramus]

Eventually got it fixed by removing the RND app support files (which contains a cache folder):

rm -rf ~/Library/Application\ Support/React\ Native\ Debugger/

[GioLogist]

@wurmr +1 thanks!

[ppozniak]

@wurmr be my husband.

As a side note this happened to me without any good reason I guess - It worked yesterday was reaction, as I didn't do any changes during my sleep.

[angusmccloud]

I am feeling really stupid... Where is Settings->Preferences->Network? I don't see it in xcode, and this type of menu doesn't seem to exist within RN...

[wachunei]

@angusmccloud We are talking about this application 😁, the app that this repo belongs to 😅

[angusmccloud]

Ha, thanks @wachunei ! Clearly I've done enough googling on this error that I didn't realize what app I was on, sorry about that!

[xstable]

I run in same issue, but found some additional Infos where the cause may. It seems, react-native-debugger don't catch all Errors, because I had the following behavior:

1. I change some coded in my app and rerun it in emulator. Nothing seems to change (even if it schould), and app "seems" to run fine.
2. I disabled the "Debug JS Remotely" and BAM, theres the Red-Screen with a huge Error-Message.

Cause in this case is an Syntax-Error in app/screens/Menu.js

3. If I toggle "Debug JS Remotely" again, the Issue won't be shown in Debugger, like before ...

So React-Native-Debugger seems to load the App via Cache, in some circumstances, even if there is thrown an Error-Message by the app. Any Idea, why?debu

[Srikanth-Pusapati]

How do I uninstall the debugger and reset the changes that it has made i.e. Replace open debugger-ui with Chrome to open React Native Debugger. to its previous state??

[NLPDev]

I changed react code but the previous result doesn't change.

[GutteApps]

Non of the proposed solutions worked for me. I have files that simply don't appear in RND sources.

[Evgenyx82]

This is really annoying %(, with this cache...

if i start application react-native run-android, and turn HMR, and change some code, and if the code had have no errors, then all fine, changes successfully replicating, but if code will have error, then cache won't update even if i undo error statement, and i should run this command in root directory of project, and continue development...

npm start -- --reset-cache

hate this :) but cordova not so far from this point :)

[GulshenMahmudova]

The universal solution that works in Chrome, Firefox and IE is cleaning the cache via Ctrl+Shift+Del (on Mac ⌘+Shift+⌫).

Open Developer Tools (F12 or ⌘+⌥+i, or right-click → Inspect). Select the Network tab and tick the Disable cache checkbox. Chrome disable cache - Network tab

Reload the page. Got from https://stackoverflow.com/questions/10045424/why-isnt-google-chrome-reloading-my-scripts

[jjercx]

Yeah, disabling cache works, for those like me who didn't get it related to React Native Debugger