10

Is it possible to right click on a component visible under React Dev tools and click "show in IDE" which opens the file in the VSCode. This would beneficial as I'd not have to go searching for the component. Often I want to view source code of a component in VS code, and code base being too big with names that overlap and component structure that doesn't mimic the pages structure due to modular reuse of components, it's quite difficult to find the exact component if you are new to the codebase. If there was a way to simply use the component picker tool from React dev tools, then click on the highlighted component to go to the file in IDE.

Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168
  • 1
    Currently there is no such functionality provided your best bet is copy component name and search the same in codebase. In VSCODE use CMD + P (mac) or Ctrl + P (Win) to search for component file. – bhavesh27 Nov 19 '19 at 18:53
  • What I usually do is, I copy a name of something from browser and then global search that in vs code (ctrl + shift + f) – Muhammad Usman Feb 14 '20 at 15:18
  • I can not navigate to vs code. Instead, I open react dev tools, click on the inspector icon then I wander the mouse over the page. While pointer move, every elements source file and line number is visible on the dev tools's bottom-right corner like "menuContainer.js : 1316". Then I open this file and go to line manually on VS code. – y.selimdogan Sep 07 '20 at 09:31
  • In react-native, we can fly to related vs-code line from emulator with tap on the element. I wish it was possible with react too. – y.selimdogan Sep 07 '20 at 09:38

2 Answers2

0

You can use React Inspector, it directly opens your code in VsCode from browser.

Link -> https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh/related

Pankaj Chouhan
  • 37
  • 1
  • 3
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/33564841) – Eyeslandic Jan 06 '23 at 22:04
0

Waiting for the react devtools team to land this feature. https://github.com/facebook/react/pull/22649

Jack Hu
  • 1,315
  • 2
  • 13
  • 27