今天的篇幅比較簡單，但是在透過框架開發時卻是一個會影響開發時間、效率很重要的關鍵工具之一，那就是 React 的 developer tools。

在開發過程時，我們肯定需要常常觀察元件(Component)中像是 state 的變化等等，這個時候就是 React developer tools 派上用場的時候囉!!

而目前的學習階段由於還沒有學習到 Redux，所以 Redux 的 developer tools 的使用就留待後面學習到的時候再說囉XD

接著讓我們來學習如何使用吧

透過瀏覽器安裝 React developer tools。

這邊介紹在 Google Chrome 與 Firefox 中安裝的部分。

在 Google Chrome 可以透過 chrome 線上應用程式商店中安裝，點擊連結前往。

而在 Firefox 中則是可以透過在 ADD-ONS 中安裝，點擊連結前往。

接著就透過 Google 的 React developer tools 來看看怎麼使用吧!

透過簡單例子使用 React developer tools

這邊為了可以更聚焦如何使用 React developer tools，所以提供一個非常簡單的測試例子。

情境： 當點擊 Card 元件時，會替換掉名字、年齡與嗜好。

相關測試範例，點擊前往。

而這裡為了節省一些時間，透過 codesandbox 這個服務來觀察，這個服務已經將 React developer tools 也都準備好了，沒意外的話應該可以看到如下的畫面:

但這邊想要分享一個小小的技巧，通常我們將專案運行起來時會透過F12 打開 chrome 的 dev tools

而如果有安裝 React developer tools 的話，預期右邊的工具列中會有兩個選項，分別是「Components」、「Profiler」(這兩個就是透過剛剛安裝後才能看到的，一般來說不會有哦!)

但如果是透過筆電或者小螢幕開發時，如果要開啟 React developer tools ，我們總是需要點擊下拉選單才可以選取到，多少會造成一些不便。

所以這邊有個自己覺得比較順手的開發習慣，就是將 「Components」移至最前方，這對於螢幕視窗不大卻要開發時，可以不會因為開發者工具視窗比較小而總是一直點擊下拉選單選取，增加了一些方便性呢！

拉回來主題，可以先點擊卡片區塊觀察是否有 state 中的資料替換掉，接著再看看 React developer tools state 的變化。

預期會從這樣子的結果:

變成這樣子的結果:

但除了可以觀察改變之外，我們也可以透過直接在這裡修改 name 的值來觀察變化，可以自行嘗試看看。

而左方的部分，則是顯示了元件(Components) 的架構，如圖:

至於「props」，若是在元件中如果有使用到 props ，就會在這裡可以清楚看見。

如 Card 元件，因為是透過 props 的值來顯示內容，所以可以看到如下資訊:

其他如「rendered by」及「source」則是用來讓開發者知道用的是哪個版本的 React-dom 與來源。

開發者工具一定要了解怎麼使用，因為這會大幅提升開發的效率!!

今天的學習就這樣囉，明天見~

鐵人賽文章與程式碼同步發佈於:

1. 個人部落格
2. Github