可以在谷歌擴展應用商店里獲取這個插件。如果不能訪問谷歌應用商店,可以在 npm 網站(www.npmjs.com)上搜索 react-devtools ,然后根據官網指導進行安裝。
安裝插件后,控制台出現 “Components” 跟 “Profiler” 菜單選項。

查看版本,步驟:



下面介紹 react devtools 的使用方式。
在 Components 處,可以看到整個 React 應用的組件數。

可以通過搜索框搜索相應的組件,當應用功能復雜時這個功能好用。

右窗口顯示組件具體的屬性。
比如,點擊左邊的第一個ListItem,右邊顯出它的 props 相關屬性、事件處理函數等等。

當在 Element 處點擊任意 DOM 元素的時候,可以看到有個 “==$0”,可以通過 "$0" 獲取相關的 DOM 節點。

在 Console 處輸入 $0 可以獲取到該元素

同樣地,在 Components 處選中某一個React組件后,可以在 Console 處將當前選中的 React 元素輸出。
比如,在 Components 處選中一個 React 組件

在 Console 處輸入 $r,就輸出了該組件的實例

輸入 $r.render() 執行 render 方法,就輸出了整個對象結構

