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

插件介紹

　　一個Chrome擴展，通過記憶每次渲染時組件的狀態(tài)來幫助調試React應用。

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

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

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

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

安裝方法

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

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

　　然后打開Chrome DevTools并導航到Reactime標簽。

功能介紹

　　錄音

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

　　查看狀態(tài)

　　您可以點擊快照來查看您的應用程序的狀態(tài)。狀態(tài)可以以JSON格式或層次樹的形式可視化。此外，快照可以與之前的快照進行對比，可以在差異標簽下查看。

　　查看應用程序

　　您可以在 "地圖 "選項卡中查看目標應用程序的整個組件層次結構。

　　跳躍

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

　　績效指標

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

　　附加功能。

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

　　-組成部分地圖可視化

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

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

　　-能夠平移和縮放樹形圖

　　-支持多個標簽

　　-一個快速移動快照的滑塊。

　　-一個自動瀏覽快照的播放按鈕。

　　-暫停按鈕，可停止記錄每個快照。

　　-當擴展被鎖定時，setState將失去功能。

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

　　-導出/導入當前內存中的快照。

　　-行動面板中的聲明性標題。

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