[Bug]: React developer tools "Inspect element" feature doesn't work with Storybook.
#28813 opened on Aug 6, 2024
Description
Describe the bug
This issue was described in detail in this previous bug report which has been closed without being fixed: https://github.com/storybookjs/storybook/issues/4769
In short, the React developer tools provide a convenient "Inspect" function to allow you to view the state of a component in detail simply by clicking on it. Storybook somehow breaks this, so that only components which are part of the Storybook user interface can be inspected, and not any of the custom components which Storybook users are developing.
There is a workaround which involves popping out the story to a new tab without the Storybook UI, at which point it's then possible to inspect the components. This is not particularly convenient, and it's hard to discover if you don't know about it already.
I think this should be considered as a priority, as not providing fast and convenient access to development tools for the most widely used frontend framework significantly detracts from Storybook's stated purpose as a "frontend workshop for building UI components and pages in isolation".
Reproduction link
https://wpds-ui-kit-storybook.preview.now.washingtonpost.com/?path=/docs/accordion--docs
Reproduction steps
- Install the react developer tools extension for your browser
- Switch to the "Components" panel
- Click on the icon at the top left to "inspect" components
- Click on a component within the story
The component which you clicked on should be selected, but instead some other component which is part of the Storybook UI is selected.
System
Storybook Environment Info:
System:
OS: Linux 6.9 Fedora Linux 40 (Workstation Edition)
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Shell: 5.2.26 - /bin/bash
Binaries:
Node: 20.12.2 - /usr/bin/node
Yarn: 4.1.0 - /usr/local/bin/yarn <----- active
npm: 10.8.2 - /usr/local/bin/npm
npmPackages:
@storybook/addon-essentials: ^8.2.7 => 8.2.7
@storybook/addon-interactions: ^8.2.7 => 8.2.7
@storybook/addon-links: ^8.2.7 => 8.2.7
@storybook/blocks: ^8.2.7 => 8.2.7
@storybook/react: ^8.2.7 => 8.2.7
@storybook/react-vite: ^8.2.7 => 8.2.7
@storybook/testing-library: ^0.2.2 => 0.2.2
chromatic: ^11.7.0 => 11.7.0
storybook: ^8.2.7 => 8.2.7
Additional context
No response