Reactime Chrome插件是一款基于谷歌瀏覽器使用的React開發(fā)者的調(diào)試工具。它以 "快照 "的形式記錄應(yīng)用程序的狀態(tài)變化，并允許用戶跳轉(zhuǎn)到之前記錄的任何狀態(tài)，歡迎需要此款工具的朋友前來下載使用。

插件介紹

　　一個(gè)Chrome擴(kuò)展，通過記憶每次渲染時(shí)組件的狀態(tài)來幫助調(diào)試React應(yīng)用。

　　Reactime被提名為2020年React開源獎(jiǎng)的生產(chǎn)力促進(jìn)獎(jiǎng)!

　　Reactime是React開發(fā)者的調(diào)試工具。它將應(yīng)用程序的狀態(tài)變化記錄為 "快照"，并允許用戶跳轉(zhuǎn)到之前記錄的任何狀態(tài)。

　　該工具適用于使用有狀態(tài)組件和道具鉆井的React應(yīng)用，測試版支持Recoil、Context API、條件狀態(tài)路由、Hooks（useState、use Effect）和功能組件。

　　第6版通過新的可視化增強(qiáng)了用戶體驗(yàn)，更好地將目標(biāo)應(yīng)用程序中的狀態(tài)數(shù)據(jù)和組件關(guān)系上下文化，同時(shí)修復(fù)了各種bug?，F(xiàn)在可以在歷史標(biāo)簽中通過點(diǎn)擊任何節(jié)點(diǎn)來完成時(shí)間跳轉(zhuǎn)。歷史和地圖選項(xiàng)卡現(xiàn)在都有一個(gè)動(dòng)態(tài)圖例，使可視化更有表現(xiàn)力和意義。地圖選項(xiàng)卡中的核心可視化器已被替換，現(xiàn)在提供了各種方向、布局和節(jié)點(diǎn)鏈接。性能選項(xiàng)卡現(xiàn)在以堆疊條形圖的形式顯示快照，為用戶提供狀態(tài)變化時(shí)組件渲染時(shí)間的鳥瞰圖。最新的版本在可視化中加入了新的onHover功能，用戶可以將組件的表現(xiàn)形式（如地圖標(biāo)簽中的節(jié)點(diǎn)或性能標(biāo)簽中的條形圖）懸停，其對(duì)應(yīng)的HTML元素將在DOM中突出顯示。

安裝方法

　　從 Chrome 網(wǎng)絡(luò)商店安裝 Reactime 擴(kuò)展。或者，使用 src/extension/build/build.zip 在開發(fā)者模式下進(jìn)行手動(dòng)安裝。如果在本地測試，請(qǐng)?jiān)跀U(kuò)展詳情頁面中打開 "允許訪問文件 URL"。

　　v3及以前的用戶注意。不再需要NPM包。

　　然后打開Chrome DevTools并導(dǎo)航到Reactime標(biāo)簽。

功能介紹

　　錄音

　　每當(dāng)狀態(tài)發(fā)生變化時(shí)（每當(dāng)調(diào)用setState或useState時(shí)），該擴(kuò)展將創(chuàng)建當(dāng)前狀態(tài)樹的快照并將其記錄下來。每個(gè)快照都將顯示在 Chrome DevTools 的 Reactime 面板下。

　　查看狀態(tài)

　　您可以點(diǎn)擊快照來查看您的應(yīng)用程序的狀態(tài)。狀態(tài)可以以JSON格式或?qū)哟螛涞男问娇梢暬?。此外，快照可以與之前的快照進(jìn)行對(duì)比，可以在差異標(biāo)簽下查看。

　　查看應(yīng)用程序

　　您可以在 "地圖 "選項(xiàng)卡中查看目標(biāo)應(yīng)用程序的整個(gè)組件層次結(jié)構(gòu)。

　　跳躍

　　時(shí)間旅行允許你跳轉(zhuǎn)到任何以前記錄的快照。點(diǎn)擊任何快照上的跳轉(zhuǎn)按鈕或點(diǎn)擊歷史標(biāo)簽中的任何節(jié)點(diǎn)都會(huì)通過設(shè)置他們的狀態(tài)來改變DOM。

　　績效指標(biāo)

　　新的性能選項(xiàng)卡顯示了一個(gè)堆疊的快照條形圖，以幫助用戶可視化并識(shí)別組件渲染時(shí)間的潛在趨勢(shì)或瓶頸。每個(gè)條形圖都有一個(gè)onHover工具提示，以獲取更多信息以及DOM高亮顯示。

　　附加功能。

　　-后坐力數(shù)據(jù)流可視化

　　-組成部分地圖可視化

　　-描繪狀態(tài)變化的多個(gè)樹狀圖分支。

　　-樹狀圖懸停功能，以查看狀態(tài)變化。

　　-能夠平移和縮放樹形圖

　　-支持多個(gè)標(biāo)簽

　　-一個(gè)快速移動(dòng)快照的滑塊。

　　-一個(gè)自動(dòng)瀏覽快照的播放按鈕。

　　-暫停按鈕，可停止記錄每個(gè)快照。

　　-當(dāng)擴(kuò)展被鎖定時(shí)，setState將失去功能。

　　-在刷新時(shí)保留快照的持續(xù)按鈕（在修改代碼和調(diào)試時(shí)很方便）。

　　-導(dǎo)出/導(dǎo)入當(dāng)前內(nèi)存中的快照。

　　-行動(dòng)面板中的聲明性標(biāo)題。

　　-擴(kuò)展了對(duì)有條件狀態(tài)字段的組件的支持。