可以在谷歌擴展應用商店里獲取這個插件。如果不能訪問谷歌應用商店,可以在 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 方法,就輸出了整個對象結構