这一期请来了字节跳动数据平台腿长1.8米的一哥sonacy。他要给大家带来一个非常非常非常好用的插件!我听说很棒的人正在使用它!这个插件防脱发效果非常非常好!之后怎么样了?让我们找出答案!刚到公司接手项目的时候,有没有遇到过一个bug或者一个小需求,因为项目太复杂,找不到对应的要修改的文件位置?有没有看过别人的项目想看实现但是因为项目结构太深,花了一个多小时才找到自己想要的地方。react-dev-inspector(https://github.com/zthxxx/react-dev-inspector)就是为了这些目的而诞生的。它的神奇之处在于可以从页面中识别出react组件,并直接跳转到本地ide的代码片段。仔细研究一下,安装npmi-Dreact-dev-inspector来使用和配置。您可以自定义键值。或者使用devtool中的window.REACT_DEV_INSPECTOR_TOGGLE()打开react-dev-inspector/es/Inspector.d.tsumi3插件中的组件属性ts类型定义文件webpack插件示例代码:https://github。com/zthxxx/react-dev-inspector/tree/master/site演示:https://react-dev-inspector.zthxxx.me原理1.如何跳转到指定文件的行?react浏览器官方插件有相关能力,可惜他会跳转到chrome源码,使用v8的api,inspect(xxx),这显然不是我们想要的结果。最简单的说,在create-react-app中,当发生错误时,会出现一层erroroverlay,点击相应的错误栈,查看相应的源码就会跳转到相应的地方,在react-dev-utils(https://github.com/facebook/create-react-app/blob/master/packages/对应的详细实现可以在react-dev-utils/launchEditorEndpoint.js中找到)。以vscode为例,就是在errorstack中找到相关信息,在devserver层添加一个createLaunchEditorMiddleware,在middleware层点击执行codexxx.js指令,详细指令可以参考相关文档2.如何获取react组件相关信息这里采用的方案是webpackloader。通过ast遍历,得到相关JSXOpeningElement的相关文件、行、列信息。将这些信息绑定到指定dom的data属性上,这样当你悬停或者点击的时候就可以获取到对应组件的相关信息。找到组件的显示名称。在这里,使用ReactFiber架构来绑定dom上的__reactInternalInstance$属性。通过type.displayName获取组件的displayName。找不到就递归找它的返回父组件。结语github项目(https://github.com/zthxxx/react-dev-inspector),欢迎尝试