storybookjs/storybook

[Bug]: React developer tools "Inspect element" feature doesn't work with Storybook.

Open

#28813 opened on Aug 6, 2024

View on GitHub
 (2 comments) (15 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
compatibility with other toolshelp wanted

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

  1. Install the react developer tools extension for your browser
  2. Switch to the "Components" panel
  3. Click on the icon at the top left to "inspect" components
  4. 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

Contributor guide