Reactime Chrome插件是一款基于谷歌瀏覽器使用的React開發(fā)者的調(diào)試工具。軟件功能很強(qiáng)大,過記憶每次渲染時(shí)組件的狀態(tài)來幫助調(diào)試React應(yīng)用。它以 “快照 ”的形式記錄應(yīng)用程序的狀態(tài)變化,并允許用戶跳轉(zhuǎn)到之前記錄的任何狀態(tài),擴(kuò)展了對(duì)有條件狀態(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。現(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中突出顯示。
安裝方法
1、在打開的谷歌瀏覽器的擴(kuò)展管理器
就是點(diǎn)擊最左側(cè)的三個(gè)點(diǎn),在彈出的菜單中選擇【更多工具】——【擴(kuò)展程序】;
或者你可以在地址欄中直接輸入chrome://extensions/
2、進(jìn)入擴(kuò)展程序頁面后將開發(fā)者模式打勾;
3、最后將解壓出來的crx文件拖入到瀏覽器中即可安裝添加;
4、如果出現(xiàn)無法添加到個(gè)人目錄中的情況,可以將crx文件右鍵,然后選擇【管理員取得所有權(quán)】,再嘗試重新安裝;
5、安裝好后即可使用。