Storybook: React dev tools

[rogchap]

Firstly, Storybook is a great tool.

Secondly, is it possible use the React (Chrome) dev tools to inspect the components/iframe?

I think this can be enabled by adding (see https://github.com/facebook/react-devtools/issues/76) to the iframe:

if (window.parent !== window) {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}

[arunoda]

I think we should support. Send us a PR.

[rogchap]

Cool... I'll look into this. Official assigned! :smile:

[arunoda]

Awesome.

[wyattdanger]

I was just about to submit a PR for this yesterday. Great timing. Will submit now

[arunoda]

Merged #104 and released as v1.11.0

[nelsonomuto]

is this broken in v4 I am unable to inspect inside the iframe

[ndelangen]

Hmm, we'll have to look into it...

This might be the reason it's broken now:
https://github.com/facebook/react-devtools/issues/76#issuecomment-304677272

[ndelangen]

Yeah I've added it as suggested there and was able to select it in the devtools 🍰

[ndelangen]

I'll add it in a PR I'm working on!

[nelsonomuto]

@ndelangen the issue I am facing is with info @storybook/react v4.0.0-alpha.12

[ndelangen]

@nelsonomuto yes, I'm aware, I think this has been broken for some time, thank you for bringing it to my attention. I've verified it works in the above mentioned branch/PR.

[nickmccurdy]

This is no longer working for me in Storybook 4.0.0 and 4.0.2, despite the fix. Any ideas?

[nickmccurdy]

I made a new issue for the inspector, the actual elements panel in devtools works fine: https://github.com/storybooks/storybook/issues/4769