React 調試開發插件 React devtools 的使用


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM