1. 首先,下載react-developer-tools開發調試工具插件。
因為谷歌插件下載需要翻牆,這里提供一個本地資源:https://www.crx4chrome.com/crx/3068/
谷歌下載.crx后綴的文件,火狐下載.xpi后綴的文件。
2. 插件安裝(以谷歌為例)
打開谷歌瀏覽器,在路勁欄輸入:chrome://extensions/
將下載的插件拖入谷歌瀏覽器,然后選中允許訪問文件網址。
點擊詳細信息
React Developer Tools會自動檢測React組件,不過在webpack-dev-server模式下,webpack會自動將React組件放入到iframe下,導致React組件檢測失敗,變通方法是webpack-dev-server配置在--inline模式下即可。
3. 在chrome瀏覽器,會出現React,右側props--組件屬性,state--組件狀態。