DevTools: Improve browser extension iframe support #18945

dmail · 2020-05-18T09:35:01Z

When react is inside an iframe, chrome extension for react devtools fails to detect react.

This is because the extension sets __REACT_DEVTOOLS_GLOBAL_HOOK__ only on the top level window. Apparently it's possible to have __REACT_DEVTOOLS_GLOBAL_HOOK__ on iframes too by adding all_frames: true in extension manifest.json. It was done by redux devtools extension in zalmoxisus/redux-devtools-extension#56.

Have you considered adding all_frames: true to chrome extension ?

Steps To Reproduce

Create a file react-main.html

<!DOCTYPE html>
<html>
  <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  </head>
  <body></body>
</html>

Create a file react-iframe.html

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <iframe src="./react-main.html" />
  </body>
</html>

Open react-iframe.html in chrome

The current behavior

The expected behavior

Pull request: #18952

The text was updated successfully, but these errors were encountered:

bvaughn · 2020-05-18T20:35:03Z

The frame limitation is mentioned in the docs, FWIW:
https://github.com/facebook/react/tree/master/packages/react-devtools

It's not a bug, just a known limitation. We currently suggest using the standalone version (as linked above) or (if you also control the iframe) passing the hook through from the parent:

react/fixtures/devtools/regression/14.9.html

Lines 9 to 11 in d897c35

    
           // Enable DevTools to inspect React inside of an <iframe> 
        
           // This must run before React is loaded 
        
           __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;

I don't think that adding the Manifest setting you mentioned would be enough on its own to make the React DevTools extension detect and support versions of React running inside of iframes.

I'd be happy for you to take a shot at implementing it though if you'd like. We have a regression test that you could use to verify this:

./fixtures/devtools/regression/server.js
# Open localhost:3000 and see if DevTools detects React

dmail · 2020-05-18T20:51:59Z

Thank you very much for your answer and rewording the issue title, it's more accurate.

In my case the iframe runs in an other domain so window.parent would not be accessible.

I am ready to try to implement it. I'll take a look tomorrow. If you have any more info to share that would greatly help me when I'll start working on it.

Thanks again, I will keep you informed and I hope I will be able to make it work :)

bvaughn · 2020-05-18T20:54:33Z

Great! Keep me posted on your progress 😄

Here's instructions to get you started:
https://github.com/facebook/react/tree/master/packages/react-devtools-extensions#build-steps

dmail · 2020-05-19T08:25:34Z

I have opened a draft pull request.
For now I have only tested to add all_frames: true on chrome extension manifest.json and it looks like it's working -> react is being detected inside a sandboxed iframe 🎉 .

dmail · 2020-05-19T09:14:29Z

Working on edge 🎉

About firefox however I have some trouble. I have changed nothing yet concerning firefox and after doing

yarn build:firefox
yarn run test:firefox

In the firefox browser that is launched the extension does not detect react on reactjs.org.

In Firefox console I see this error (and many more with the same error code):

The extension in firefox store is working properly

Firefox fails to load some file (apparently related to Localization) when the extension is loaded locally. Any idea what is going on ?

dmail · 2020-05-19T12:40:35Z

About firefox I got workarounds depending what happens:

(a) Firefox addon is shown but fails to detect react
-> refresh the page and it will work normally

(b) Firefox addon does not even show up
-> go to Firefox settings
-> disable react devtools addon and enable it right away
-> go back to reactjs.org and it will work normally

As I said this happens already on master branch without any change on my side.

Now that I can test firefox extension locally I move on and try to add all_frame: true on Firefox.

dmail · 2020-05-19T13:15:20Z

I'm putting pull request in ready for review.

ghost · 2020-06-25T06:47:37Z

What happened to this issue? Is it available for me to try out?
@dmail , are you planning on working on it or I may try to figure this out?

dmail · 2020-06-25T07:04:09Z

Hello, the pull request is on hold because I don't know what to tackle first. On my side I was waiting for advice to restart working on it. Go ahead, I'm still interested on the subject so I'll keep an eye on it (and may still help to the extent of my abilities).

ghost · 2020-06-25T07:28:13Z

@dmail thank you!

markerikson · 2020-07-02T21:01:05Z

For the record, I was able to make this work with a Next.js app that is providing the iframe, with these changes:

$NEXT_PROJECT/public/js/enableReactDevtoolsIframe.js

// The React DevTools do not normally look inside of iframes, just the outer window.
// We can enable inspection of React components in an iframe by copying this global variable:
// https://github.com/facebook/react/issues/18945#issuecomment-630421386
// This code must be injected before React runs, so we add it as a separate tag
// and show it via Next.js <Head> in _app.tsx.
if (window.parent) {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}

$NEXT_PROJECT/pages/_app.tsx

import React from 'react';
import Head from 'next/head';

export default function MyApp({ Component, pageProps }: { Component: any; pageProps: any }) {
  // Ensure the React DevTools global variable is injected if this is an iframe
  // to enable inspection of components inside the iframe.
  return (
    <React.Fragment>
      <Head>
        <script src="js/enableReactDevtoolsIframe.js"></script>
      </Head>
      <Component {...pageProps} />
    </React.Fragment>
  );
}

marvinhagemeister · 2020-07-03T10:52:36Z

FYI: We've been using the all_frames: true option in manifest.json for a while now over with preact-devtools and it works like a charm. The only thing one needs to be careful about is to inject the highlighting code into each iframe too! Otherwise the position will be off.

bvaughn · 2020-07-06T14:24:01Z

@marvinhagemeister Do you remember doing anything additional (beyond just adding all_frames: true option in manifest.json) to get it to work? I haven't taken the time to dig into this yet but I did test out the linked PR (#18952) and it didn't appear to be working.

@shakhbulatgaz did you ever end up digging into this?

marvinhagemeister · 2020-07-06T16:05:29Z

@bvaughn Not much really, only had to ensure that each adapter that's injected into the client doesn't traverse into other iframes. The linked PR looks correct to me, so I'm guessing something isn't ok with the connection logic. Maybe it's the same timing issue we've been talking about a while back that's more of a regression in Chrome?

For reference: The PR that added support for iframes for preact-devtools: https://github.com/preactjs/preact-devtools/pull/209/files

bvaughn · 2020-07-06T16:29:52Z

Gotcha! Thanks for elaborating 😄

Maybe it's the same timing issue we've been talking about a while back that's more of a regression in Chrome?

I think the fix for this issue has made its way into stable (or at least I'm no longer seeing the issue myself).

ghost · 2020-07-06T17:45:41Z

@bvaughn Nah, I'm sorry, other things came up and I completely forgot about this 😢

bvaughn · 2020-07-06T17:49:55Z

Fair enough. Maybe someone else will pick it up :)

anrao91 · 2020-07-06T17:54:30Z

@bvaughn Can you explain to me the current scenario and what needs to be done? Was reading through the thread but couldn't deduce much. This is my first issue to pick from react repo.

bvaughn · 2020-07-06T18:00:59Z

@anrao91 Unfortunately, no. Not beyond what's been discussed on this thread and on the linked PR (#18952).

Reflex-Gravity · 2020-07-13T23:44:41Z

@bvaughn By adding the below code, doesn't enable react to inspect inside an iframe. I tried the regression test, didn't work there either.

__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;

I was able to make this work by copying the values of parents __REACT_DEVTOOLS_GLOBAL_HOOK__ one by one, instead of copying it directly. (Maybe this isn't the right approach, but it seems to work)

for (const key in __REACT_DEVTOOLS_GLOBAL_HOOK__) {
      __REACT_DEVTOOLS_GLOBAL_HOOK__[key] = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__[key]
}

I verified it by doing the regression test on Firefox and Chrome. It detected React and also displayed the entire component tree under the Components Panel. (Didn't work for React 0.14.9 though due to incompatibility)

Copying it directly didn't update the iframe's __REACT_DEVTOOLS_GLOBAL_HOOK__ value, I'm not really sure why though. Maybe because it's is not writable. When using defineProperty, writable is false by default. But, In this case, the above working code shouldn't have worked. 😄

react/packages/react-devtools-shared/src/hook.js

Lines 309 to 321 in 9ea0f67

    
           Object.defineProperty( 
        
             target, 
        
             '__REACT_DEVTOOLS_GLOBAL_HOOK__', 
        
             ({ 
        
               // This property needs to be configurable for the test environment, 
        
               // else we won't be able to delete and recreate it beween tests. 
        
               configurable: __DEV__, 
        
               enumerable: false, 
        
               get() { 
        
                 return hook; 
        
               }, 
        
             }: Object), 
        
           );

Anyways let me know your thoughts on this.

Below is a sceenshot showing the working eg:,

sarathps93 · 2020-08-30T13:48:07Z

Can I take this up if no one else is currently working on it? @bvaughn @dmail

bvaughn · 2020-08-31T15:32:01Z

@sarathps93 You're welcome to work on this. Please check out the work and discussion on #19345 before starting though!

omarsy · 2020-09-07T06:45:49Z

@sarathps93 Are you still working on it ?

KutnerUri · 2021-01-07T10:44:56Z

can you merge the fix with a feature flag? (i.e. enable-able from settings)
I'm having the __REACT_DEVTOOLS_GLOBAL_HOOK__ fix and I want to remove it!

bvaughn · 2021-01-07T14:11:54Z

No. If there was a simple fix that just needed to be merged, it would have been merged already. Both previous attempts to fix this have needed to be reverted because they've caused unexpected problems.

Regardless, the fix is not something that could be enabled/disabled via a setting– because it requires changes to things like the extension manifest JSON.

prsmahajan · 2021-06-05T18:31:54Z

Hi, I want to work on this issue, can you suggest me ways to get started?

bvaughn · 2021-06-05T19:41:05Z

@prsmahajan You can find an architecture overview doc about how DevTools works here:
https://github.com/facebook/react/blob/master/packages/react-devtools/OVERVIEW.md

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

Beyond that, this would likely be an unguided task because we're all spread a little thin at the moment.

prsmahajan · 2021-06-06T11:01:20Z

What is the main problem you all are facing?

flydge · 2021-06-19T12:16:02Z

Solution above works partly, only with deactivated CORS (for me)
Do u have any ideas, how to allow using of devtools with enabled CORS?

jplindgren · 2021-07-18T00:03:48Z

I believe I have the same problem as @flydge .

amorphousDj · 2021-09-23T02:53:29Z

@bvaughn Can I take a look at it as my first issue?

bvaughn · 2021-09-23T12:29:09Z

If you'd like to, please do.

Mukulbaid63 · 2021-10-26T12:17:54Z

Can I Pick this, as its pending from long time back @bvaughn

bvaughn · 2021-10-26T13:46:43Z

Sure.

luanhcastro · 2021-12-01T02:34:41Z

Hi i'd like to contribute.

richiepreece · 2022-06-09T19:13:32Z

This seems more urgent with google announcing removing document.domain. This means the parent hook passthrough is only available for same-protocol/subdomain/domain iframes.

Has there been any movement on this?

awells111 · 2022-07-24T11:05:43Z

It looks there are a couple pull requests that try to use the manifest.json approach, setting all_frames: true and getting the global devtools hook from the parent. That hasn't worked for my use case and I'm not confident that I would be able to fix the issue in the repo that way since it looks like that fix has been tried for about 7 years (see react-devtools issue 76).

As a workaround, what I want to do is create a dropdown that will let the user pick a frame and then show the component tree for that frame. Is that a viable solution? Would I have better luck with using the standalone devtools app found here?

dmail · 2022-07-24T12:01:39Z

For the record all_frames: true was inspired from preact-devtools. It might be interesting to see how preact use it and make things work. Out of my abilities.

awells111 · 2022-07-26T12:02:39Z

@omarsy Do you remember why #19854 was reverted? Is it because the changes cause some tests to fail or is it something else? The changes in that PR look like they're meeting the needs of my application.

omarsy · 2022-07-26T12:15:14Z

Hello the issue is reverted because someone says it has an issue with my PR #19854 (comment). But I don't think it is related of my PR.
It is why I create a new PR to fix the issue of the comment #19994 to see if it is caused by my PR or not.
If I have time this month I will try to close my two PRs

awells111 · 2022-07-26T13:17:22Z

Thank you. I am available to help if you need. I am currently comparing the outputs of yarn test and yarn flow dom between the React repo and my fork (updated to 19854) to see what can be resolved.

richiepreece · 2022-07-26T17:48:13Z

@awells111 I think the frame selector is ideal if possible. Similar to what chrome does when you have iframes.

There's always the option for the standalone dev tools, but honestly it's not great for when you're trying to find a component because you don't have a selector, and you have to know the component tree to know where to look.

awells111 · 2022-08-04T13:23:59Z

#19854 fixes the issue for me. I didn't wind up implementing anything like a frame selector.

A fork including the changes from #19854 can't be uploaded to the web store until the manifest is updated to v3, if we're even allowed to upload forks to the chrome web store. As a temporary solution, developers can create their own forks and build the modified repo locally. That has worked for me for now.

github-actions · 2024-04-10T17:03:43Z

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

github-actions · 2024-04-17T18:15:59Z

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

dmail added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label May 18, 2020

bvaughn changed the title ~~Bug: Chrome react devtools extension does not detect react in iframe~~ DevTools: Improve browser extension iframe support May 18, 2020

bvaughn added Component: Developer Tools good first issue and removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug labels May 18, 2020

dmail mentioned this issue May 19, 2020

Add all_frames:true to browser devtool extension #18952

Closed

Reflex-Gravity mentioned this issue Jul 14, 2020

Support iframe for React-Devtools browser extension. #19345

Closed

eps1lon mentioned this issue Jan 18, 2021

react-developer-tools is not supporting iframes #20610

Closed

pmmmwh mentioned this issue Jun 7, 2021

Component modifications are not applied pmmmwh/react-refresh-webpack-plugin#334

Closed

bvaughn removed the good first issue label Dec 14, 2021

alicnik mentioned this issue Jan 18, 2022

React DevTools only works on isolated page epicweb-dev/advanced-react-apis#167

Closed

markerikson mentioned this issue Mar 30, 2023

Is there any roadmap to enable the detection of iframes in React devtools? #26515

Closed

zaqqaz mentioned this issue Jul 30, 2023

[DevTools Bug] Cannot add node "1" because a node with that id is already in the Store. #27121

Open

github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 10, 2024

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 17, 2024

DevTools: Improve browser extension iframe support #18945

DevTools: Improve browser extension iframe support #18945

Comments

dmail commented May 18, 2020 • edited Loading

Steps To Reproduce

The current behavior

The expected behavior

bvaughn commented May 18, 2020

dmail commented May 18, 2020

bvaughn commented May 18, 2020

dmail commented May 19, 2020

dmail commented May 19, 2020

dmail commented May 19, 2020 • edited Loading

dmail commented May 19, 2020

ghost commented Jun 25, 2020 • edited by ghost Loading

dmail commented Jun 25, 2020

ghost commented Jun 25, 2020

markerikson commented Jul 2, 2020 • edited Loading

marvinhagemeister commented Jul 3, 2020

bvaughn commented Jul 6, 2020

marvinhagemeister commented Jul 6, 2020

bvaughn commented Jul 6, 2020

ghost commented Jul 6, 2020

bvaughn commented Jul 6, 2020

anrao91 commented Jul 6, 2020

bvaughn commented Jul 6, 2020

Reflex-Gravity commented Jul 13, 2020 • edited Loading

sarathps93 commented Aug 30, 2020

bvaughn commented Aug 31, 2020

omarsy commented Sep 7, 2020 • edited Loading

KutnerUri commented Jan 7, 2021

bvaughn commented Jan 7, 2021 • edited Loading

prsmahajan commented Jun 5, 2021

bvaughn commented Jun 5, 2021

prsmahajan commented Jun 6, 2021

flydge commented Jun 19, 2021

jplindgren commented Jul 18, 2021 • edited Loading

amorphousDj commented Sep 23, 2021

bvaughn commented Sep 23, 2021

Mukulbaid63 commented Oct 26, 2021

bvaughn commented Oct 26, 2021

luanhcastro commented Dec 1, 2021

richiepreece commented Jun 9, 2022 • edited Loading

awells111 commented Jul 24, 2022 • edited Loading

dmail commented Jul 24, 2022 • edited Loading

awells111 commented Jul 26, 2022

omarsy commented Jul 26, 2022

awells111 commented Jul 26, 2022

richiepreece commented Jul 26, 2022

awells111 commented Aug 4, 2022

github-actions bot commented Apr 10, 2024

github-actions bot commented Apr 17, 2024

dmail commented May 18, 2020 •

edited

Loading

dmail commented May 19, 2020 •

edited

Loading

ghost commented Jun 25, 2020 •

edited by ghost

Loading

markerikson commented Jul 2, 2020 •

edited

Loading

Reflex-Gravity commented Jul 13, 2020 •

edited

Loading

omarsy commented Sep 7, 2020 •

edited

Loading

bvaughn commented Jan 7, 2021 •

edited

Loading

jplindgren commented Jul 18, 2021 •

edited

Loading

richiepreece commented Jun 9, 2022 •

edited

Loading

awells111 commented Jul 24, 2022 •

edited

Loading

dmail commented Jul 24, 2022 •

edited

Loading