感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書，鼓勵筆者撰寫更多優質文章。

現在我們已經用 React 完成了兩個簡單的網頁程式，分別是計數器和網速單位轉換器。你會漸漸感受到每個 React 組件內部都可以保有自己的資料狀態，以帶有多個不同起始值和最大、最小值的計數器來說，除非我們透過程式去檢視，直接透過瀏覽器是無法了解每個 React 組件內部的資料狀態的。

好在 React 提供了友善的開發者工具，讓開發者只需要從瀏覽器就可以去檢視和修改每個 React 組件內各自的資料狀態。

React 開發者工具支援 Chrome 和 Firefox 瀏覽器，分別可以在各自的擴充套件商店下載（Chrome 擴充套件、Firefox 擴充套件）。

現在就請你先根據習慣使用的瀏覽器下載對應的 React 開發者工具，在這裡我們就以 Chrome 為例來說明使用方式。

檢視頁面內的 React 組件

下載好 React 開發者工具後，打開前幾天在 CodePen 完成的 Day 11 - Multiple Counters with different min and max number by props 和 Day 11 - Network Speed Converter with props 接著切換到 Debug 模式，讓它進入一個乾淨獨立的畫面：

打開瀏覽器的開發者工具後，會看到多了兩個名為 Components 和 Profiler 的頁籤：

先來點選 Components 的部分，從中可以看到 React 開發者工具會列出該頁面的所有 React 組件。

像是在計數器中，會顯示這頁一共有使用到 5 次 <Counter /> 組件：

而在網速轉換器中，則會用階層的方式顯示各組件的關係，可以看到 <SpeedConverter /> 這個組件內還包含了 <UnitControl /> 和 <CardFooter /> 這兩個部分：

除了可以直接在 Components 頁籤中去檢視各個組件之外，有些時候因為複雜的頁面會同時使用非常多的組件，或各組件嵌套的情形比較嚴重時，也可以從比較熟悉 Elements 頁籤先找到想檢視的元素，點選後再切換到 Components 頁籤，如此 React 開發者工具會直接幫你去選到該組件：

透過 React 開發者工具，該頁面使用到的 React 組件就可以一目瞭然。

檢視和修改 React 組件內的資料狀態

透過 React 開發者工具除了能夠檢視該頁面使用了哪些 React 組件之外，還可以去檢視和修改該組件內的資料狀態，只需要點選該組件後即可在下方看到 props 和 state：

還記得 props 和 state 是指什麼嗎？

props 就是指由外部傳入該組件內的資料，以上圖為例，就是因為在使用該組件時是透過 <Counter maxNumber="30" minNumber="21" startingValue="25" /> 這種方式把資料帶入該組件內的。

hooks 裡面的 State 表示的是該組件自身內部的資料，也就是使用 useState 產生的資料。

不論是 props 或 state 的值都可以直接在 React 開發者工具內進行修改，這在檢查程式邏輯的時候非常方便，例如我們可以直接透過修改 state 或 maxNumber 等欄位看看畫面是不是如我們預期的，在特定條件下「向上／下箭頭」就會消失：

Components 中的其他功能

React 開發者工具除了上述常用的功能之外，右邊也有一些按鈕可以使用：

• 點擊「碼表」適合用在有套用 React.Suspense 的組件，這種組件因為需要等到 AJAX 資料回來後才會開始渲染對應的畫面，因此會需要有「等待」的畫面。
• 點擊「眼睛」會直接切換到 Elements 頁籤，讓你看到該組件在 DOM 中的位置，方便透過瀏覽器直接去調整 CSS 樣式。
• 點擊「蟲蟲」後會在 console 頁籤顯示該組件有關的資料狀態，方便複製或透過 JavaScript 直接在該頁籤操作資料。
• 點擊「原始碼」會直接切換到 Sources 頁籤，並顯示該組件位於程式碼中的哪個部分，在偵錯時也非常方便。

效能檢視 Profilers

此外，除了 Components 頁籤之外，React 開發者工具中還提供了一個 Profilers 頁籤，這個頁籤主要是用來檢視效能的，當網頁中有很多組件需要渲染，而且又需要透過非同步的方式取得資料回來更新畫面的情況下，有些時候再資料狀態沒有處理好的情況下，可能會使得這些組件多了一些不必要的渲染次數。

在這種情況下，透過 Profilers 頁籤可以去看該頁面內各組件渲染所花費的時間和次數：

要使用這個工具需要點選錄影的「●」符號開始記錄，接下來可以按下右方的「重新整理」按鈕，然後正常操作該頁面，好的時候再點選一次錄影符號即會停止紀錄。在設定中還可以開啟提示，React 開發者工具就會提示你該組件重新渲染的原因，這一點在實際開發要找問題的時候還蠻方便的：

更多關於 Profilers 的使用可以進一步參考 React 在官方網站 的說明。

參考資料

• Introducing the React Profiler @ React Blog
• How to use profiling in production mode for react-dom @ Gist
• React.Suspense @ React Docs - API Reference