本文 转载自 微信订阅号”豆皮范儿“：https://mp.weixin.qq.com/s/msJqWfhXzLhQgSNQ9jI-zA
背景
- 有没有遇到过刚到公司，接手项目就去排bug或者一个小需求，因为项目太复杂，你找不到你要修改的对应文件位置？
- 有没有遇到看到别人项目，想看看实现却因为项目结构太深，而花了1个小时以上才找到你想要的地方。
react-dev-inspector就是为了这些目的而诞生的。
接入
安装
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.Fragment
export 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: https://github.com/jaywcjlove/hotkeys#supported-keys | 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'] })
示例
代码: https://github.com/zthxxx/react-dev-inspector/tree/master/site
演示: https://react-dev-inspector.zthxxx.me
原理
1. 如何跳转到指定文件的line?
react官方浏览器插件有相关能力，可惜他会跳转到chrome source中，利用的是v8的api，inspect(xxx), 这里显然不是我们想要的结果
最简单来说，在create-react-app中，当出现错误后，会出现一层error overlay，点击对应的错误栈，就会跳转到对应的地方
通过查看对应源码，在react-dev-utils中能找到对应的详细实现。
以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项目地址，欢迎大家试用，提issue，pr.
字节跳动数据平台前端团队，在公司内负责大数据相关产品的研发。我们在前端技术上保持着非常强的热情，除了数据产品相关的研发外，在数据可视化、海量数据处理优化、web excel、sql编辑器、私有化部署、工程工具都方面都有很多的探索和积累，有兴趣可以与我们联系。对产品有任何建议和反馈也可以直接找我们进行反馈 ~
