在 Day 25 介紹 React Profiler 的文章中有提到 React Developer Tools，不過當時只有使用到 Profiler 頁籤，所以這次要來好好瞭解 React Developer Tools。

這次使用的範例程式在以下連結，可以下載後執行搭配本文觀看。

範例連結

介紹 React Developer Tools

執行範例程式後，打開開發人員工具，點擊 Component 頁籤後，會先從左側欄可以看到整個專案的每一層元件，如果要從畫面找到專案內的元件檔案位置，就可以從 React Developer Tools 上的元件資訊去找比較快。
然後點擊 Provider 後會出現右側欄的一些資訊，包括幾個部分:

1. props: 元件的 props
2. hooks: 展開可以看到 store 裡面的 state，像 {counter: 0}、{isAuthenticated: false} 等都是儲存在 store 裡的 state。
3. rendered by: 從哪些母元件去 render 該元件 & 顯示專案的 React 版本
4. source: 當前元件所在的檔案名

觀察 state 變化

React Developer Tools 它可以偵測 state 的變化，在這個範例網頁上的 Counter 元件中，它的計數值存在 Redux store 裡面，而 toggle Counter 元件的 state show 則是寫在 Counter 元件裡面。

在網頁點擊增減 Counter 元件的計數值時，可以看到左側的 hook 部分的 Selector 值隨著網頁變更，雖然沒有明確寫出名字但可以看出那就是 Redux store 裡面存放的 counter state。然後在點擊 toggle counter 的時候 state 也會進行 true/false 的切換。

現在點擊 Header 元件，讀者可以試試點擊登入按鈕關看 state 的變化，另外這個元件有傳入 props，所以可以看到有個 title 字串。

其他功能

點擊 React Developer Tools 右上角的齒輪，會跳出一個小視窗，裡面分別有四個項目:

1. 調整 React Developer Tools 主題

第一個項目可以調整主題，像下圖選擇了黑暗的主題。

2022/02/16 更新

Highlight updates when components render. 這個 checkbox 勾選後，若元件有更新的話可以顯示哪些元件被更新。

根據在 react github 中的其中一個 issue 的討論，可以知道這個 Highlight updates when components render. 按鈕有以下幾點特色:

1. 重新渲染時會出現藍綠色的框線，若有比較耗效能的渲染會出現黃、紅色框線。
2. 速度快的渲染框線會較快褪色，反之亦然。

2. 隱藏特定元件

第三個項目讓你將符合條件的元件隱藏。

其他的兩個項目是一些設定的 ckeckbox 選項

在紅框的部分也有四個項目做選擇:

1. 時鐘按鈕

和 Suspense 元件相關，用來顯示 Suspense 元件內 fallback 屬性的狀態

2. 眼睛按鈕

用來找 DOM 元素用，點擊想查找 DOM 元素的元件，然後點擊眼睛一下，就會跳到 Element 頁籤。

3. 蟲按鈕

將元件的資料印到 console。

4. <> 按鈕

點擊元件然後再點擊此按鈕會跳到 Sources 頁籤，顯示該元件的程式碼。

更多範例

除了我提供的範例外，也可以到以下網站觀看更多範例:

This page contains a fake web browser with the React DevTools extension connected to a small React app.

明天將會來介紹另一個好用的工具，Redux DevTools。