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

最新推荐文章于 2024-04-09 09:47:12 发布

莹宝思密达

最新推荐文章于 2024-04-09 09:47:12 发布

阅读量1.2k

点赞数

分类专栏： vscode调试js 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/miin_ying/article/details/128186535

版权

vscode调试js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：在刚接触到一个项目的时候，还没搞懂它的路由和文件结构的时候，而你的项目又充斥着大量重复/相似代码，往往在解决一个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