React Dev Inspector, 提升开发效率的神器！

这一期，我邀请到了字节跳动数据平台的腿长一米八sonacy小哥哥。他要给大家带来一个非常非常非常好用的插件！听说牛逼的人都在用它！这款插件防脱发效果非常非常好！是什么呢？让我们揭晓吧！

1. 有没有遇到过刚到公司，接手项目就去排bug或者一个小需求，因为项目太复杂，你找不到你要修改的对应文件位置？

2. 有没有遇到看到别人项目，想看看实现却因为项目结构太深，而花了1个小时以上才找到你想要的地方。

react-dev-inspector(https://github.com/zthxxx/react-dev-inspector)就是为了这些目的而诞生的。

它的神奇之处就在于，可以从页面上识别react组件，直接跳转到本地ide的代码片段上，厉害吧

好好研究一下

安装

npm i -D react-dev-inspector 

使用和配置

可以自定义开关键值，或者在devtool里面通过window. REACT_DEV_INSPECTOR_TOGGLE ()开启

<Inspector> 组件属性

ts类型定义文件在 react-dev-inspector/es/Inspector.d.ts

umi3插件

webpack插件

示例

代码: 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（https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/launchEditorEndpoint.js）中能找到对应的详细实现。

• 以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项目（https://github.com/zthxxx/react-dev-inspector），欢迎大家试用

本文转载自网络，原文链接：https://mp.weixin.qq.com/s?__biz=MzU0ODk0MDg4Nw==&mid=2247484367&idx=1&sn=bdecefc218f7921b6623827ae4a2c47a&utm_source=tuicool&utm_medium=referral
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！