Comments (4)
That's the actual point here, yes.
The React DevTools add window.__REACT_DEVTOOLS_GLOBAL_HOOK__
to the main window
, but not to iframes.
So, you have to copy that reference into each iframe in order for the DevTools to talk to React inside that iframe.
from react.
See #18945 for the main discussion around iframe handling.
Most likely you'll need to do something like this:
if (window.parent) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}
from react.
Thanks for sharing @markerikson. I didn't knew there was an already open discussion about it, I should close this issue then 😅
Actually, for me it's the other way around, something like:
const iframeWindow = ocument.getElementById("iframe").contentWindow;
if(iframeWindow){
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = iframeWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__
}
but iframeWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__
is undefined so I guess the React Devtools doesn't inject __REACT_DEVTOOLS_GLOBAL_HOOK__
into iframes.
from react.
Ah I see!
I just tested it but in my case the Iframe runs on different domains (I inject the Iframe from an extension) I get a cross-origin error.
Thanks for your help!
from react.
Related Issues (20)
- Missing Information about useCallback in Custom Hooks Documentation
- [DevTools Bug] Cannot add node "1590" because a node with that id is already in the Store. HOT 8
- Bug: `use` in `lazy` returns content from previous `use` calls on first request
- Bug: `use()` yields incorrect value during first SSR HOT 1
- StrictMode does not support lazily initialized useRef HOT 6
- Bug: Misleading error message when using "use" hook without a Suspense wrapper HOT 1
- Bug: import(metadata.specifier) cause error on windows HOT 1
- Inconsistency Between Server-Side Rendering and Client-Side Rendering Causes "Prop did not match" Error
- Security issue: React is vulnerable to supply chain attacks HOT 12
- [DevTools Bug]: Extension not loading for local files in Electron since 4.27.5 HOT 1
- Bug: RSC render errors aren't caught by Error Boundaries HOT 2
- [DevTools Bug]: React devtool is not there in codesandbox HOT 1
- Feature request: context propagation throughout component tree without Context API or prop drilling (like Vue's provide/inject API) HOT 10
- Bug: Streaming Hydration fails when promise is created within a suspense-wrapped component
- [DevTools Bug]: footer next button hover Ui issues HOT 1
- [DevTools Bug] getCommitTree(): Invalid commit "13" for root "1". There are only "7" commits. HOT 1
- [DevTools Feature Request]: Full support for RSC server elements (component tree, props, inspect)
- [DevTools Bug]: Cannot read properties of undefined (reading 'toLowerCase') HOT 2
- Bug: test HOT 3
- [DevTools Bug]: Extension breaks PRTG web interface HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.