Comments (9)
@Zinggi I had the same problem. following @jaredly 's solution, I've added script tag to index.html
<script> __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__ </script>
now it is working! (thanks @jaredly !!!)
from react-devtools.
I have a small working example in this gist.
from react-devtools.
@jaredly, @yonatanmn:
It works! Thanks a lot!
I tried following the gist before, but I tried putting __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
in my script file, before require("react"), but that didn't work.
So yes, the suggested solution works, this does the trick:
in index.html
:
<script> __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__ </script>
<script type="text/javascript" src="main.js"></script>
from react-devtools.
They changed the way that react exposes itself to the devtools. What you need to do is, before react is loaded in the child iframe, do window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
.
That ought to work.
from react-devtools.
That still doesn't work for me, window.__REACT_DEVTOOLS_GLOBAL_HOOK__
is defined, but it's not helping. window.React
is also defined.
The React tab just doesn't want to show up.
I'm also using react-router, maybe this causes some problems in this constellation?
from react-devtools.
I still can't get it to work.
These are all the relevant versions:
react 0.12.1
react-router 0.11.4
react-hot-loader 0.5.0
webpack 1.4.13
webpack-dev-server 1.6.6
The devtools work perfectly if I build my project, but not with the hot loader setup.
The devtools also work nice on other sites made with React.
With my setup that doesn't work, __REACT_DEVTOOLS_GLOBAL_HOOK__
is correctly exposed, but it's no use. (Using window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
or not makes no difference)
If I print it in the console, I get this:
> __REACT_DEVTOOLS_GLOBAL_HOOK__
< Object {inject: function, getSelectedInstance: null, Overlay: null}
Is there maybe a way to manually inject the devtools?
Or how exactly does this inject process work?
from react-devtools.
how can you do this when the iframe has a different origin?
I'm getting the following error: Uncaught SecurityError: Blocked a frame...
from react-devtools.
For @yonida you can disable security in chrome to get it to work.
But realize, you are literally disabling security, so you don't want to use this for normal browsing, use a dedicated chrome instance for this.
TLDR: Add this alias command to your .bash_profile
and use it to startup an insecure instance of chrome (from which you can get the trick above to work):
alias insecure="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=/Users/$USER/Library/Application\\ Support/Google/ChromeInsecure > /dev/null 2>&1 &"
ref: http://stackoverflow.com/a/6083677/418739
from react-devtools.
Thanks @ibash
from react-devtools.
Related Issues (20)
- Can't install in Firefox HOT 1
- Expand all elements using default browser hot keys HOT 1
- Security issues with React.Provider HOT 5
- Search input text colour HOT 4
- Is it unmaintainable? HOT 1
- React App not Functioning with Extension Enabled HOT 1
- Having the devtools extension enabled breaks Kibana HOT 3
- New devtools is not compatible with React 0.14 HOT 5
- New Devtools: Where is Highlight Updates? HOT 5
- New Devtools Broken on Firefox 68.0.2, Windows 10 HOT 1
- React Devtools - Component selection bug v4 HOT 1
- Remove emoji from browser devtools tabs HOT 2
- New Devtools: Update props does not rerender component HOT 2
- Inspector: clicking on element with style object value causes crash HOT 1
- Firefox Private Browser Support HOT 1
- Show component file path HOT 1
- Long interaction names cannot be seen HOT 1
- Getting maximum call stack exceeded on backend.js when rendering many elements. HOT 2
- Using react-devtools to inspect component that only appears on hover HOT 1
- React devtools 4.0.4 (8/18/2019) Expected to find root ID. HOT 3
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-devtools.