Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React DevTools doesn't work on sandbox #23

Closed
CompuIves opened this issue Jun 14, 2017 · 10 comments
Closed

React DevTools doesn't work on sandbox #23

CompuIves opened this issue Jun 14, 2017 · 10 comments
Labels
🐛 Bug

Comments

@CompuIves
Copy link
Member

Currently the DevTools defaults to the React version of CodeSandbox, it should default to the sandbox.
@ryanbraganza
Copy link

It looks like to debug an iframe, the React devtools electron app can be used. See facebook/react-devtools#76

Is there a way to modify the <head> to add a <script> before the bundle?

screen shot 2017-07-21 at 8 34 34 am

@artivilla
Copy link

Happy to help here. Not sure which direction @CompuIves wants to take this -- as a separate window which is odd to me or part of the react dev tools plugin. There are also several places where react-dom is initialized so not sure where I'd place the block if (window.parent !== window) { mentioned in facebook/react-devtools#76.

@JonShort
Copy link
Contributor

JonShort commented May 1, 2018

For others which find this issue after searching something like 'React devtools codesandbox' and need a workaround - You can now use the React DevTools by opening the iframe in a new window:
image

Then use the DevTools on the new tab 👍

Thanks to Kent C Dodds for revealing this solution to me!

@lbogdan
Copy link
Contributor

lbogdan commented May 1, 2018

And for those who search for "vue devtools codesandbox", this also works for Vue! 🙂

@lbogdan
Copy link
Contributor

lbogdan commented May 1, 2018

Just in time for the spring cleaning, so that I can close this long-standing issue! 👏

@lbogdan lbogdan closed this as completed May 1, 2018
@PeterKnight
Copy link

I've had no luck getting vue devtools to work on codesandbox even with the sandbox running inside a new window, has anyone else? When I move any vue project from codesandbox to local machine it does work however.

@lbogdan
Copy link
Contributor

lbogdan commented Sep 25, 2018

@PeterKnight It's working here:
screen shot 2018-09-25 at 14 52 16

@PeterKnight
Copy link

for me the vue devtools extension shows "Vue.js not detected", I'm running windows 10 x64 and have tried 3 different browsers with the latest vue devtools installed.

@lbogdan
Copy link
Contributor

lbogdan commented Sep 25, 2018 •
edited

Hint: it doesn't need to be detected in order to work (if you look closely you'll see my Vue icon is grayed, too). Just open Chome DevTools and go to the Vue tab. 🙂

@PeterKnight
Copy link

Lol, it does! Thanks @lbogdan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ryanbraganza @CompuIves @PeterKnight @lbogdan @artivilla @JonShort