Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
DevTools: Improve browser extension iframe support
See original GitHub issueWhen 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 https://github.com/zalmoxisus/redux-devtools-extension/pull/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.htmlin chrome
The current behavior
The expected behavior
Pull request: https://github.com/facebook/react/pull/18952
Issue Analytics
- State:
- Created 3 years ago
- Reactions:42
- Comments:53 (13 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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: https://github.com/facebook/react/blob/d897c35ecfb7471b55e41933fd4d993b98dbf600/fixtures/devtools/regression/14.9.html#L9-L11
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:
That’s why the issue is still open, @alleksei37.