'Using react dev tools inside iframe [In Chrome]
When react app is inside an iframe, dev tool chrome extension for react is not working.
Refererd: https://github.com/facebook/react/issues/18945
Solution suggested by the dev tools team: https://github.com/zalmoxisus/redux-devtools-extension/pull/56.
"Adds the 'all_frames' option to the manifest.json to allow DevTools to access iframes that might hold the Store instead of the main page".
What should I do to enable the dev tools in iframe. should I clone the devtools repo (https://github.com/facebook/react/tree/master/packages/react-devtools-extensions#build-steps) and add all_frames option and use it ?
Solution 1:[1]
Maybe this is too late. But, I saw this thread in some other SO conversation (which I unfortunately cannot find now)
Essentially they suggest adding this to the body of the iframe'd application.
<script>
if (window.parent !== window) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}
</script>
This seems to work for my use-case which seems similar to what the OP mentioned.
Solution 2:[2]
Use this guide https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-dom
- Install react-devtools globally or locally
# Yarn
yarn global add react-devtools
# NPM
npm install -g react-devtools
- Launch react-devtools by command in terminal:
react-devtools
After you'll see this:
Put this line to head tag in index.html/index.ejs/whatever you use and run your app
Enjoy
Solution 3:[3]
You can use a built-in extension: https://github.com/facebook/react/tree/main/packages/react-devtools
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | dotdeb |
| Solution 2 | aH6y |
| Solution 3 | Alexander Sobolev |