豆皮粉们，又见面了，这一期，我邀请到了字节跳动数据平台的腿长一米八sonacy小哥哥。他要给大家带来一个非常非常非常好用的插件！听说牛逼的人都在用它！这款插件防脱发效果非常非常好！是什么呢？让我们揭晓吧！
作者：sonacy
来源：原创
背景
-
有没有遇到过刚到公司，接手项目就去排bug或者一个小需求，因为项目太复杂，你找不到你要修改的对应文件位置？
-
有没有遇到看到别人项目，想看看实现却因为项目结构太深，而花了1个小时以上才找到你想要的地方。
react-dev-inspector(github.com/zthxxx/reac…
接入
安装
npm i -D react-dev-inspector
使用和配置
import React from 'react'import { Inspector } from 'react-dev-inspector'const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : React.Fragmentexport const Layout = () => { // ... return ( <InspectorWrapper keys={['control', 'shift', 'command', 'c']} // default keys ... // Props see below > <XXXContent> </XXXContent> </InspectorWrapper> )}
可以自定义开关键值，或者在devtool里面通过window.REACT_DEV_INSPECTOR_TOGGLE()开启
<Inspector> 组件属性
ts类型定义文件在 react-dev-inspector/es/Inspector.d.ts
| Property | Description | Type | Default |
|---|---|---|---|
| keys | inspector toggle hotkeys |
supported keys see: github.com/jaywcjlove/… | string[] | ['control', 'shift', 'command', 'c'] |
| disableLaunchEditor | whether disable click react component to open IDE for view component code
(launchEditor by default only support be used with react-dev-inpector plugins in dev) | boolean | false |
| onHoverElement | trigged while inpector start and mouse hover in a HTMLElement | type ElementHandler | - |
| onClickElement | trigged while inpector start and mouse click on a HTMLElement | type ElementHandler | - |
umi3插件
// .umirc.dev.ts// https://umijs.org/config/import { defineConfig } from 'umi'export default defineConfig({ plugins: [ 'react-dev-inspector/plugins/umi/react-inspector', ], inspectorConfig: { exclude: [ 'xxx-file-will-be-exclude', ], },})
webpack插件
import { inspectorChainWebpack } from 'react-dev-inspector/plugins/webpack/config-inspector'inspectorChainWebpack(webpackConfigChain, { exclude: ['xxx-file'] })
示例
演示: react-dev-inspector.zthxxx.me
原理
1. 如何跳转到指定文件的line?
-
react官方浏览器插件有相关能力，可惜他会跳转到chrome source中，利用的是v8的api，inspect(xxx), 这里显然不是我们想要的结果
-
最简单来说，在create-react-app中，当出现错误后，会出现一层error overlay，点击对应的错误栈，就会跳转到对应的地方
-
通过查看对应源码，在react-dev-utils（github.com/facebook/cr…
-
以vscode为例子，就是在错误栈找到相关信息，在dev server层增加一个createLaunchEditorMiddleware，点击后在middleware层执行 code xxx.js的指令就可以，详细指令可以查看相关文档
2. 如何获取到react组件的相关信息
-
这里采取的方案是webpack loader。通过ast遍历，获取相关JSXOpeningElement的相关file，line，column信息。把这些信息绑定在了指定dom的data attributes上，这样你在hover或者click的时候就能获得对应组件的相关信息了。
-
查找组件的displayName，这里利用react fiber架构在dom上绑定__reactInternalInstance$属性的特点，通过其type.displayName获取组件的displayName，如果找不到则递归找其return父组件
结语
github项目（github.com/zthxxx/reac….
