React: Devtools v4 does not work with Firefox's private window

[tetsuharuohzeki]

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

• bug
• This issue has been reported in https://github.com/facebook/react-devtools/issues/1383

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:

• react devtools' _component_ pane show Unable to find React on the page.
• From about:debugging, we can see the below messsage:

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?

• Firefox 68
• react devtools v4.0.5
• react v16.9

[JohnPhamous]

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

[hristo-kanchev]

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]

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

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

[hristo-kanchev]

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]

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]

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

[agnij]

解决了吗

[Jonarzz]

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]

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]

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

[nilueps]

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]

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]

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)