search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.56k stars 46.42k forks source link

Hotkey for "Select an element in the page to inspect it" in Chrome extension #17298

Open skoshy opened 4 years ago

skoshy commented 4 years ago

Reopening https://github.com/facebook/react-devtools/issues/966 as I feel it'd still be a great feature to have.

To reiterate, it'd be great to have a hotkey to trigger the "Select an element in the page to inspect it" functionality, similar to how Ctrl + Shift + C triggers Chrome's element inspector mode.

gejimayu commented 4 years ago

I'll give this a try !

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

stale[bot] commented 4 years ago

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

eps1lon commented 3 years ago

Reopening since the PR that would implement this feature is still open.

happylolonly commented 3 years ago

Merge it please

SimsonEnduro commented 2 years ago

👍

LakeYS commented 2 years ago

+1 for this.

For fellow Googlers: An easy workaround for this is to use the normal element selector (Ctrl-shift-C) and then switch to the Components tab, where the corresponding React component (or something close to it) will be selected.

shaunlebron commented 1 year ago

Improving on @LakeYS’s workaround (thanks!)

In DevTools, drag the React Components tab next to Elements, like this:

CleanShot 2023-08-16 at 15 49 22@2x

So you can use these hotkeys in succession:

  1. ⌘ Shift C selects the element
  2. ⌘ ] switches to React panel (with component highlighted)
spacecat commented 9 months ago

Wow, surprised this isn't implemented.

happylolonly commented 9 months ago

Wow, surprised this isn't implemented.

yes, me too...