question-mark
Stuck on an issue?

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.

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__;
}

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:4
  • Comments:13 (8 by maintainers)

github_iconTop GitHub Comments

11reactions
nickmccurdycommented, Oct 31, 2018

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

1reaction
ndelangencommented, Jul 26, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Developer Tools
React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies ......
Read more >
react-devtools - npm
react -devtools ... This package can be used to debug non-browser-based React applications (e.g. React Native, mobile browser or embedded webview, ...
Read more >
React Developer Tools - React Docs
Use React Developer Tools to inspect React components, edit props and state, and identify performance problems. You will learn. How to install React...
Read more >
React Developer Tools – Get this Extension for Firefox (en-US)
React Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more.
Read more >
facebook/react-devtools: An extension that allows ... - GitHub
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools. - GitHub - facebook/react-devtools: An extension ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found