问题

大型项目中，找页面上的 UI 对应的组件源码很花时间。

解决方案

React

方案1: 点击组件，跳转到 VSCode 中的组件源码

可以用第三方库: React Dev Inspector 来实现。

原理: 当您点击页面上的元素时，React Dev Inspector 会与 VSCode 通信，指引它打开相应的组件文件。更多关于其工作原理的详细信息，可以参考 原理揭秘文章。

方案2: 在浏览器审查查看组件的名称

用浏览器插件 React Developer Tools 来实现。然后用组件名在项目中全局搜索。

Vue

方案1: 在浏览器审查查看组件的名称

用浏览器插件 Vue.js devtools 来实现。然后用组件名在项目中全局搜索。