search

facebook / react

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

Devtools v4 does not work with Firefox's private window #16547

Open tetsuharuohzeki opened 5 years ago

tetsuharuohzeki commented 5 years ago

Do you want to request a feature or report a bug?

What is the current behavior?

Steps to Reproduce is here:

  1. Environments are:
  2. Open the page which uses react with a private window.
  3. Open Firefox's devtools.

Actual Result is:

SecurityError: Permission denied to access property "container" on cross-origin object main.js:51:305877
    Kl moz-extension://56db142d-3d36-b04e-91ca-a7504c7708a5/build/main.js:51
    apply self-hosted:4417
    applySafeWithoutClone resource://gre/modules/ExtensionCommon.jsm:588
    asyncWithoutClone resource://gre/modules/ExtensionCommon.jsm:2400

What is the expected behavior?

react devtools work

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

JohnPhamous commented 5 years ago

I also have this same issue. Worked before the update.

hristo-kanchev commented 5 years ago

I'll take a look at this one. πŸ‘

I'll try and provide you with an update by the end of the week.

Joel-Raju commented 5 years ago

I'm also having this issue on Firefox Developer Edition.

FireFox - v70.0b9 (64-bit) react devtools - v4.1.0

hristo-kanchev commented 5 years ago

Hey everyone. Just reproduced the issue and tried to fix it.

It seems more complex than I initially thought.

For some reason when we create the panels via devtools.panels.create and we attach the onShown event we receive a completely different window object (called panel in this case).

When using the DevTools normally we get the full window object and it's properties, but when in private mode it seems like a stripped down version of it.

I tried digging through both the chromium/MDN docs but I can't find anything related.

Also, I tweaked my Firefox configuration without success.

Does anyone have any ideas to why this might happen?

Thanks @saneyuki for the detailed description and repro steps!

jaimeburnap-fts commented 4 years ago

This is still an issue for me. Any movement on it?

It used to work just fine. But I don't remember what version that was.

mattm-malone commented 4 years ago

Still experiencing this. Any updates? I need to use private mode when testing. Firefox v73.0 (64bit) React Developer Tools 4.4.0

agnij commented 4 years ago

解决了吗

Jonarzz commented 4 years ago

I've just encountered this issue as well with React Developer Tools 4.7.0 and Firefox 77.0.1. Are there any plans of solving it?

WMahoney09 commented 4 years ago

I'm also encountering this. React Developer Tools can find react on https://reactjs.org/ normally, but not in private mode.

FireFox: 76.0.1 React Developer Tools: 4.7.0

elbro commented 4 years ago

@hristo-kanchev any update on this? Very annoying when you do all your web work with Firefox and use private windows.

sqwxl commented 4 years ago

Same issue here; i like to use private windows to test my apps with all browser extensions disabled and DevTools do not work (the extension is allowed to run in private windows) Firefox: 79.0 React Developer Tools: 4.8.2

grahamb commented 4 years ago

Issue exists on Firefox Developer Edition 81.0b3, React devtools 4.8.2. I do almost all my dev work in private windows, this makes the tool less than useful.

jaromero commented 4 years ago

I hate to be that guy, but the Vue devtools don't have this problem.

Are there any fundamental differences in how React and Vue become available to devtool extensions? Or is it just that the Vue devtools grabs the app instances from the page differently?

(Firefox Nightly 83.0a1 2020-10-12, React devtools 4.8.2 revision fed4ae024)

mknmohit commented 3 years ago

Still the React devtools v4.10.1 on firefox developer edition v86.0b7 is not working in private mode and showing the same message Unable to find React on the page

cybersquid commented 3 years ago

Still here in Firefox Developer Edition 89.0b7 (Mac OS).

bvaughn commented 3 years ago

In case it's not clear, no one is working on this issue. That's why it's still open and that's why the behavior hasn't changed.

If you would like to work on it, please leave a comment. I would welcome the help. πŸ˜€

The React DevTools are maintained by me (bug fixes and new features) as a part time effort and it's a lot of work to juggle. While I appreciate that this issue is probably irritating, I have to weigh it against a lot of other issues and it hasn't been a top priority yet. (And unfortunately it likely won't be in the near future.)

nloding commented 3 years ago

This issue is affecting my work on some performance issues for a client. I'm gonna start taking a look, but I've never built a browser extension before. If anyone has any tips, let me know! πŸ˜ƒ

bvaughn commented 3 years ago

Here is a high level overview of the architecture: https://github.com/facebook/react/blob/master/packages/react-devtools/OVERVIEW.md

And here is how to build and test the extension: https://github.com/facebook/react/tree/master/packages/react-devtools-extensions#local-development

jvdburgh commented 3 years ago

If you just want a 'clean' browser install (without previously placed cookies, storage etc.) for debugging purposes and if you are using Private Windows to accomplish this (and not for testing the Private Windows specifically), Containers might be a handy workaround!

You can make temporary containers with a single button-press using this plugin: https://addons.mozilla.org/en-US/firefox/addon/temporary-containers/

Firefox's containers are criminally underrated πŸ˜ƒ

ezno12 commented 1 year ago

any update ! i still facing the same problem? any tips or tricks to make it work to test my app?

EricMoIr commented 7 months ago

It's been almost 5 years and this still happens. Is it ever going to be worked on?

bvaughn commented 7 months ago

Probably not