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

开发 前端
本文要给大家带来一个非常非常非常好用的插件!听说牛逼的人都在用它!这款插件防脱发效果非常非常好!是什么呢?让我们揭晓吧!

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

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

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

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

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

好好研究一下

[[354097]]

安装

  1. 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),欢迎大家试用

 

责任编辑:张燕妮 来源: 豆皮范儿
相关推荐

2020-08-11 08:11:40

JavaScript开发技术

2020-09-13 13:30:01

命令开发代码

2023-11-22 08:26:03

HutoolJava工具集

2018-01-19 09:00:37

2019-11-27 10:08:36

程序员技能开发者

2021-04-18 18:58:16

JRebelJVM插件

2022-06-28 10:58:21

工具Java

2020-03-29 11:46:16

前端开发前端工具

2018-02-06 11:10:27

iOS开发Xcode快捷键

2022-05-27 08:40:27

java工具

2018-01-19 22:36:23

idea插件编码

2009-06-05 15:04:36

Eclipse代码模版

2023-08-24 16:43:23

2020-07-25 19:38:54

JavaScriptJavaScript库Web

2018-02-04 22:29:21

iOS开发

2020-10-22 15:05:43

开发者技能工具

2022-09-23 08:00:00

开发安全低代码平台

2015-11-10 10:11:32

ios开发工具效率

2022-04-20 09:26:08

Mock前端开发工具

2020-09-23 16:51:15

办公软件电脑技术
点赞
收藏

51CTO技术栈公众号