使用 React Developer Tools 來偵錯你的網頁

Photo by Luca Bravo on Unsplash

React Developer Tools 是一款由 facebook 開發的 chrome 偵錯工具，透過這個工具可以看到 React 元件的結構，我們還可以直接編輯或是查看元件的 props / state ，讓整個開發流程更順利。

安裝插件

我們可以從這邊取得這個插件來安裝

安裝完畢之後請重開 chrome

打開插件

到我們正在開發的 React 網頁上面空白處點選右鍵 → 檢查

接著出來的開發者視窗找到右邊的 React 打開 Developer Tools

查看元件屬性

展開元件樹之後，我們可以看到每個元件的 state, props, context這三種資料，這對我們偵錯是很有幫助的，舉例來說，我們可以透過這些數值來看到我們的程式是否有正確的把值塞入元件中

修改元件屬性

除了查看之外，我們也可以直接修改 props 的數值，馬上修改完成之後就會觸發 React 的渲染，就可以馬上看到結果。

總結

透過 React Developer Tools 可以快速看到元件之間的關係，以及元件的屬性狀態等等訊息，對於開發的速度可以有提升的效果，如果你還有搭配使用 Redux 可以下載 Redux DevTools 一起服用。