react-dev-inspector

 

 

react项目中有这样一个款插件react-dev-inspector,用来解决什么问题呢?

就是当一个已经上线的项目出现了一个bug的时候,如果你对该项目不是非常熟悉,那么你就需要从来去捋一遍代码,还要非常费劲的去找到该处的代码位置,那么react-dev-inspector就是来解决这个问题的。借用github的一张动图来表示,如下:

一、配置loader

在webpack中配置loader的作用是,在打包的过程中获取代码的位置,并记录在元素的html属性上,基本上有这么几个内容:代码的文件位置,代码的行数,代码的列数生成的元素如下结构如下:

<div
  data-inspector-line="11"
  data-inspector-column="4"
  data-inspector-relative-path="src/components/Slogan/Slogan.tsx"
  class="css-1f15bld-Description e1vquvfb0"
>
  <p data-inspector-line="44" data-inspector-column="10" data-inspector-relative-path="src/layouts/index.tsx" > Inspect react components and click will jump to local IDE to view component code. </p>
</div>;

在webpack中具体配置如下:

module: {
    rules: [
      {
        test: /\.[jt]sx$/,
        exclude: [
          /node_modules/,
          /file-you-want-exclude/,
        ],
        use: [
          {
            loader: 'react-dev-inspector/plugins/webpack/inspector-loader',
            options: [{
              // loader options type and docs see below
              exclude: [
                'xxx-file-will-be-exclude',
                /regexp-to-match-file /,
              ],
              babelPlugins: [],
              babelOptions: {},
            }],
          },
        ],
      },
    ],
  },

一定要注意:

这里有一个坑点,就是该项功能使用的是AST,所以该loader应该配置在babel-loader的后边,也就是说需要被babel-loader编译成AST之后,才可以被该loader识别并转换。

二、配置plugins

上边获取的仅仅是该代码的相对位置,还需要拿到绝对路径,这里需要把该项目的工作目录配置好,如下:

import { DefinePlugin } from 'webpack'

plugins: [

    new DefinePlugin({

           'process.env.PWD': JSON.stringify(process.cwd()),

    }),

]

配置webpackDevServer 需要在本地监听是否点击了相关组件,在服务端就会打开代码位置

import { createLaunchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'
devServer: {
    before: (app) => {
      app.use(createLaunchEditorMiddleware())
    },
  },
 
 

三、在根组件配置 inSpectorWrapper 

react运行时动图中显示的页面的遮罩层

 

import { Inspector, InspectParams } from 'react-dev-inspector'

const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : React.Fragment

export const Layout = () => { // ... return (

    <InspectorWrapper

        keys={['control', 'shift', 'command', 'c']}

        disableLaunchEditor={false}

        onHoverElement={(params: InspectParams) => {}}

        onClickElement={(params: InspectParams) => {}}

    >

        <YourComponent> ... </YourComponent>

    </InspectorWrapper>

)}

 

四、配置编辑器

这个时候还不足以打开编辑器并定位到具体的位置,因为在环境中还不能调动编辑器,在vscode中做如下操作即可。

  1. 打开vscode
  2. ctrl + shift + p,输入shell command

选择install 'code' command in PATH 即可

you can use window.__REACT_DEV_INSPECTOR_TOGGLE__() to toggle inspector. 你也可以使用该方法切换调试模式

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的错误信息,"cannot find module 'react-dev-utils/crossspawn'",这通常意味着你正在尝试在你的项目中使用 react-dev-utils 模块的 crossspawn 子模块,但是该模块无法找到。 要解决这个问题,你可以尝试以下一些解决方法: 1. 首先,确保你的项目中已经安装了 react-dev-utils 模块。你可以使用以下命令来安装它: ``` npm install react-dev-utils ``` 或者使用 yarn: ``` yarn add react-dev-utils ``` 2. 如果模块已经正确安装,但是仍然无法找到 crossspawn 子模块,那么可能是模块路径配置出现了问题。你可以尝试删除并重新安装 react-dev-utils 模块,然后再次运行你的项目。 3. 还有一种可能是,crossspawn 子模块是在你的项目中被错误地引用。你可以检查你的代码,确保正确地引用 crossspawn 子模块。一般情况下,你可以使用以下代码来引用 crossspawn 子模块: ```javascript const crossSpawn = require('react-dev-utils/crossspawn'); ``` 或者,如果你正在使用 ES6 的模块化语法,你可以尝试使用以下代码: ```javascript import crossSpawn from 'react-dev-utils/crossspawn'; ``` 请注意,在尝试上述解决方法之前,你可能需要先完全删除你的 node_modules 文件夹,并再次运行 `npm install` 或 `yarn` 命令来重新安装所有的依赖项。这样做可以确保你安装的模块都是最新的,并且可以解决一些与依赖版本冲突相关的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值