一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools

i042416發表於2020-11-24
AngularChrome套件Reduxdev

Redux DevTools：

chrome.google.com/webst


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


安裝完畢後，在Chrome開發者工具裡會多出一個Redux皮膚：


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


以及在Chrome右上角的擴充套件工具欄裡，會點亮Redux DevTools對應的圖示。


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


此時在redux皮膚裡即可方便的檢視ngrx相關的state和action：


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


可以輸入關鍵字進行過濾，比如檢視和Currency載入相關的action：


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


action包含type和payload：


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


把這個type複製下來，即可到對應原始碼里根據關鍵字進行搜尋： [Site-context] Load Currencies Success


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


Load Product Data時，state裡的loading標誌位是true：


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


載入成功後，loading從true變為false，success從false變為true：


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


state欄能看到當前action觸發時，應用的state狀態，很方便：


一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools 一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


更多Jerry的原創文章，盡在："汪子熙":

一個好用的檢視Angular應用ngrx狀態的Chrome擴充套件：Redux devTools


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2736603/，如需轉載，請註明出處，否則將追究法律責任。

相關文章