如何从 Chrome React Dev Tools 在 VS 代码中打开组件文件？
[英]How to open component file in VS code from Chrome React Dev Tools?
问题描述
是否可以右键单击 React Dev 工具下可见的组件，然后单击“在 IDE 中显示”以在 VSCode 中打开文件。 这将是有益的，因为我不必 go 搜索该组件。 我经常想在 VS 代码中查看组件的源代码，由于组件的模块化重用，代码库太大，名称重叠，组件结构不模仿页面结构，很难找到确切的组件如果您是代码库的新手。 如果有一种方法可以简单地使用 React 开发工具中的组件选择器工具，则单击突出显示的组件到 go 到 IDE 中的文件。
2 个解决方案
解决方案1
0 2023-01-05 09:56:34
你可以使用 React Inspector，它直接从浏览器在 VsCode 中打开你的代码。
链接 -> https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh/related
解决方案2
0 2023-01-16 08:08:18
等待 React devtools 团队登陆此功能。 https://github.com/facebook/react/pull/22649
当 Chrome 开发工具打开时，样式化组件内的图像重新渲染
[英]Images Rerendering inside Styled Component when Chrome Dev Tools is open
React - 如何在同一文件上导出多个组件，防止<Unknown/>开发工具上的组件
[英]React - How to Export Multiple Components on same File, preventing <Unknown/> Component on Dev Tools
在 Chrome 扩展开发工具中使用反应开发工具是不可能的吗？
[英]Is it impossible to use react dev tools in a Chrome extension dev tools?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何从 Chrome 开发工具源中隐藏代码？
当 Chrome 开发工具打开时，样式化组件内的图像重新渲染
如何从开发工具中隐藏 api 链接和 React JS 代码？
React 开发工具空白组件
React - 如何在同一文件上导出多个组件，防止<Unknown/>开发工具上的组件
在 Chrome 扩展开发工具中使用反应开发工具是不可能的吗？
React PWA 无法在 Chrome 开发工具中重新加载
在 iframe 中使用 react 开发工具 [在 Chrome 中]
反应开发工具未在 Chrome 浏览器中加载
React Dev 工具将我的组件显示为未知
相关标签