umi乌米框架下使用react-dev-inspector ，通过点击页面跳转到vscode对应代码行

前言：在刚接触到一个项目的时候，还没搞懂它的路由和文件结构的时候，而你的项目又充斥着大量重复/相似代码，往往在解决一个bug的时候会花费大量的时间在找对应文件上！！此时，你需要一个react-dev-inspector ！！！！它可以使你点击页面上元素时，直接跳转到编辑器所在文件。这个插件目前也支持在Vite2、create-react-app、Umi中使用，接入也都很简单，可以参考react-dev-inspector GitHub 仓库及使用文档。

实现方式：

1、下载 react-dev-inspector 。

yarn add -D react-dev-inspector 

2、配置umi的config.js文件

import { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'

  extraBabelPlugins: [
    'react-dev-inspector/plugins/babel',
  ],
  chainWebpack(config, { webpack }) {
    const originBefore = config.toConfig().devServer
 
    config.devServer.before((app, server, compiler) => {
 
      app.use(launchEditorMiddleware)
 
      originBefore?.before?.(app, server, compiler)
    })
 
    return config
  },

3、在 React 组件的最外层包裹 Inspector 组件，用于在浏览器端监听快捷键，弹出 debug 的遮罩层，在点击遮罩层的时候，利用 fetch 向本机服务发送一个打开 VSCode 的请求

import { Inspector, InspectParams } from 'react-dev-inspector'
const InspectorWrapper =
    process.env.NODE_ENV === 'development' ? Inspector : React.Fragment;
 
render(){
  return (
      <InspectorWrapper keys={['control', 'shift', 'command', 'c']}>
        //你的react组件
      </InspectorWrapper>
  );
}

4、使用：ctrl+shift+command+c 左键选中元素。跳转到组件

 react-dev-inspector教程：GitHub - zthxxx/react-dev-inspector: jump to local IDE code directly from browser React component by just a simple click

react-dev-inspector运行原理:

🎉我点了页面上的元素，VSCode 乖乖打开了对应的组件？原理揭秘。 - 腾讯云开发者社区-腾讯云

扩展：第六十七式https://segmentfault.com/a/1190000040437981?utm_source=sf-hot-article