這一期，我邀請到了字節(jié)跳動數(shù)據(jù)平臺的腿長一米八sonacy小哥哥。他要給大家?guī)硪粋€非常非常非常好用的插件！聽說牛逼的人都在用它！這款插件防脫發(fā)效果非常非常好！是什么呢？讓我們揭曉吧！

1. 有沒有遇到過剛到公司，接手項目就去排bug或者一個小需求，因為項目太復雜，你找不到你要修改的對應文件位置？

2. 有沒有遇到看到別人項目，想看看實現(xiàn)卻因為項目結(jié)構(gòu)太深，而花了1個小時以上才找到你想要的地方。

react-dev-inspector(https://github.com/zthxxx/react-dev-inspector)就是為了這些目的而誕生的。

它的神奇之處就在于，可以從頁面上識別react組件，直接跳轉(zhuǎn)到本地ide的代碼片段上，厲害吧

好好研究一下

[[354097]]

安裝

npm i -D react-dev-inspector 

使用和配置

可以自定義開關(guān)鍵值，或者在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. 如何跳轉(zhuǎn)到指定文件的line?

• react官方瀏覽器插件有相關(guān)能力，可惜他會跳轉(zhuǎn)到chrome source中，利用的是v8的api，inspect(xxx), 這里顯然不是我們想要的結(jié)果

• 最簡單來說，在create-react-app中，當出現(xiàn)錯誤后，會出現(xiàn)一層error overlay，點擊對應的錯誤棧，就會跳轉(zhuǎn)到對應的地方

• 通過查看對應源碼，在react-dev-utils（https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/launchEditorEndpoint.js）中能找到對應的詳細實現(xiàn)。

• 以vscode為例子，就是在錯誤棧找到相關(guān)信息，在dev server層增加一個createLaunchEditorMiddleware，點擊后在middleware層執(zhí)行 code xxx.js的指令就可以，詳細指令可以查看相關(guān)文檔

2. 如何獲取到react組件的相關(guān)信息

• 這里采取的方案是webpack loader。通過ast遍歷，獲取相關(guān)JSXOpeningElement的相關(guān)file，line，column信息。把這些信息綁定在了指定dom的data attributes上，這樣你在hover或者click的時候就能獲得對應組件的相關(guān)信息了。

• 查找組件的displayName，這里利用react fiber架構(gòu)在dom上綁定__reactInternalInstance$屬性的特點，通過其type.displayName獲取組件的displayName，如果找不到則遞歸找其return父組件

結(jié)語

github項目（https://github.com/zthxxx/react-dev-inspector），歡迎大家試用