這篇要介紹的是 Redux DevTools，是一個可以紀錄及操作存在 Redux store 內的 state 以及 dispatch action 的工具，更方便的 Debug。

安裝完這個擴充套件後，可以從開發人員工具的 Redux 頁籤或是直接點擊 Redux DevTools 的 icon 都能順利的開啟 Redux DevTools 的介面。

這篇的範例延續使用上一篇的範例。

State 頁籤

在 State 頁籤的部分，可以看到存在 Store 裡面的所有 state，當我們從網頁上去操作 counter 元件，在 Redux DevTools 裡記錄的 state 也會隨之變化，並且每次更新 state 都會在最左側欄留下一次紀錄，可以隨時點擊紀錄回到當時的 state 值。

並且這個頁面底下有一個播放的進度條，點擊播放時可以將左側欄更新 state 的過程重新撥放一次，如果要隱藏進度條點擊最下方整排按鈕中的時鐘按鈕即可。

除此之外，還有三種呈現 state 的方式，可以依照個人需求選擇。

Diff 頁籤

Diff 頁籤可以看見修改前後的 state 值。

Action 頁籤

這個頁籤會呈現出目前觸發的 action，如果有 payload 也會一起出現，一樣有 Tree、Chart、Raw 三種圖形可以選擇。

點擊最下排按鈕的鍵盤按鈕，還可以自己 dispatch action，可以自訂 payload 的值。

Test 頁籤

點開它會出現測試的程式碼。

Inspector / Log monitor / Chart

在整個 React DevTools 的上面區塊有個 Inspector 的文字，點擊之後有三個模式可以切換，去呈現不同的更新 state 紀錄。

• Log monitor 會呈現出完整的 state 和 actions
• Chart 會呈現樹狀圖

底下按鈕欄介紹

1. Pause/Start 按鈕: 點擊暫停後不會在左側欄紀錄 state 的變化，但網頁上的 state 依舊會隨 actions 去更新。
2. Lock 按鈕: 這個按鈕會將網頁的所有 actions 全部凍結，state 都禁止更新。
3. Persist 按鈕(圖釘): 會將 state 記錄起來，網頁重新整理後出現整理前的 state。
4. 上傳和下載按鈕: 可以上傳和下載包含 state 的 JSON 檔。
5. 電台按鈕: 會跳出一個獨立的 React DevTools 視窗。

參考資料

Redux Devtools for Dummies