facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.44k stars 46.39k forks source link

[DevTools Bug]: Chrome extension's settings reset after every reload #22727

Open Guris opened 2 years ago

Guris commented 2 years ago

Website or app

Chrome 95.0.4638.69 (Official Build) (64-bit), DevTools version 4.21.0-2f8f60ca8

Repro steps

  1. Open Chrome dev tools
  2. Switch to Components or Profiler tab
  3. Select settings and change for example "Highlight updates when components render."
  4. Reload window
  5. Get back to settings - checbox is not checked.

Expected behavior is to preserve settings forever (local storage?) or at least between reloads.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

bvaughn commented 2 years ago

I have just checked and I am unable to reproduce this. Given that this is the first time I've heard this issue being reported, I suspect there's something specific about maybe your browser (e.g. which other extensions you have installed) or something else on your end.

Have you tried just uninstalling and re-installing the React DevTools extension? That would be the easiest way to check for a fix. If not, can you tell me which other extensions you have installed? (Visit "about:extensions" in Chrome.)

Guris commented 2 years ago

Reinstall did not help - settings is still lost on page reload. I enabled extension (only this one) in incognito mode to prevent interference with other extensios and outcome was same as well in incognito mode.

Other extensions I use: AdBlock — best ad blocker 4.39.1 Auto-Group Tabs 0.0.5 Autofill 9.6.6 Checker Plus for Google Calendar™ 28.2.1 Dark Reader 4.9.42 EditThisCookie 1.6.3 Go Back With Backspace 2.1 GoFullPage - Full Page Screen Capture 7.6 Go Incognito 0.0.7 Google Dictionary (by Google) 4.1.8 Google Docs Offline 1.35.0 Google Search Keyboard Shortcuts 1.1.15 Imagus 0.9.8.74 JWT 1.1 Porovnání cen 2.2.0 Převod měn 1.4 uMatrix 1.4.4 Tampermonkey 4.13 Unit Converter 0.0.0.5

bvaughn commented 2 years ago

@Guris Just to rule them out, I wonder if you would be willing to disable the other extensions and see if the problem persists?

Alternately, and maybe an easier way to test, would be to enable this option:

Screen Shot 2021-11-09 at 10 21 33 AM

Then open an incognito window and see if the problem still persists (without other extensions enabled)

bvaughn commented 2 years ago

I wonder about Go Incognito as a potential suspect. I doubt it would interfere with localStorage in another extension but...it does seem related to that.

Guris commented 2 years ago

I already tried incognito mode with ONLY React Dev Tools extension - as I mentioned in my previous message. Still the same. Disabling Go Incognito extension didn't help either.

bvaughn commented 2 years ago

as I mentioned in my previous message

Sorry. I overlooked that detail.

I don't have any ideas at this point. Can you do some debugging? I could send you a development build of the extension with some extra error logging, maybe that would shed some light on where things on going wrong? I know it's not ideal, but I don't have other ideas.

Here's a build if you're willing to try it: ReactDevTools.zip

Be sure to disable the current React DevTools before installing and running this one. (Running two at once can cause problems.)

Guris commented 2 years ago

I've enabled dev build you provided. The error still prevails. Where can I find some debug logs, please? It's not present in standard console output in Chrome Dev Tools.

bvaughn commented 2 years ago

Ah, my apologies for not mentioning this.

  1. Open the extension settings in Chrome: chrome://extensions/?id=fmkadmapgofadopljbjfkapdkoienihi
  2. Under "Inspect views", click the second link: Screen Shot 2021-11-11 at 7 36 21 AM

This will open a separate developer tools panel that can be used to inspect the extension itself. The log should appear there.

Guris commented 2 years ago

Unfortunatelly there is only one "inspect view" shown. (And there is no extra log found.) Also extension you provided has different id - see the screenshot, please. image

bvaughn commented 2 years ago

Ah, my apologies. I pasted in the extension ID from the Chrome store– but the locally built one I sent you has a different ID. That's right.

I believe you need to have at least an instance of the DevTools open (can be in another tab obviously) for the second view to show up under the "Inspect views" link.

(The browser UI for debugging DevTools is not great. Sorry.)

Guris commented 2 years ago

I can only see Error button on extension tile: image And after reloading the page with devTools open this error always occurs: image

Inside background.js on lines 43-49 is this fn definition:

/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };

I hope this might help somehow. I'm currently not able to provide more information...

bvaughn commented 2 years ago

Hm. Any chance you'd be available to hop on VC sometime and take a look at this together? I'm out of ideas.

larahfelipe commented 2 years ago

I was having the same issue, but I think I might have found a solution. In my case, I had the "Block third-party cookies" enabled on the Privacy tab of Chrome settings, so I just switched to "Allow all cookies" and the problem has gone. Don't know if you're still facing this issue since this conversation started a long time ago, but definitely try it out.

Guris commented 2 years ago

Hello @larafe1, you're absolutely right. I've tested this and setting was preserved. Good job! Thanks ;-)

Unfortunatelly that's not the option for me (with 3rd party cookies enabled). At least I (and others) know the cause now.

For extension authors: is there any other way of storing extension settings? Or to setup Chrome to preserve the settings?

Thank you.

raulmarindev commented 1 year ago

I was having the same issue, but I think I might have found a solution. In my case, I had the "Block third-party cookies" enabled on the Privacy tab of Chrome settings, so I just switched to "Allow all cookies" and the problem has gone. Don't know if you're still facing this issue since this conversation started a long time ago, but definitely try it out.

Thank you so much, @larafe1. I was going crazy with this problem. Perhaps @rbalicki2, @kassens or @tyao1 would know if this behavior is intended or expected? If that's the case, maybe a Note or Warning message could be added to the settings tab in order to let the users know. I normally use incognito mode for testing my apps so I can avoid extensions warnings, javascript, etc.

uncaught commented 1 year ago

Is this extension using https://developer.chrome.com/docs/extensions/reference/storage/ ? If not, maybe that would help.

I don't want to enable 3rd party cookies and losing the settings every reload drives me nuts :(

manojverma086 commented 3 weeks ago

We are also facing this same issue. Is this documented somewhere?