在 Chrome 或者Firefox中安裝擴(kuò)展 React Devtools 可以讓你在瀏覽器開發(fā)者工具中查看 React 的組件樹驳遵。
github地址：https://github.com/facebook/react-devtools
1淫奔、安裝步驟如下：
git clone https://github.com/facebook/react-devtools.git
cd react-devtools //切換到工程目錄
git checkout v3 // 切換到v3分支
cnpm install // 安裝依賴
cd shells/chrome //切換到chrome目錄下
node build.js // 執(zhí)行完后會(huì)在當(dāng)前目錄生成一個(gè)build文件夾
谷歌瀏覽器網(wǎng)址輸入chrome://extensions
點(diǎn)擊 “開發(fā)者模式”
點(diǎn)擊“加載已解壓的擴(kuò)展程序”
選擇 react-detools/shells/chrome/build/unpacked 文件夾，安裝完成
溫馨提示: 如果上面的步驟1克隆不下來代碼堤结，可以直接在github上切換到v3分支搏讶，然后下載zip包，解壓霍殴，進(jìn)入到react-devtools-3目錄
cnpm install安裝依賴后進(jìn)行后續(xù)步驟。
1599790895(1).jpg
2系吩、使用
安裝完成后需要 重啟瀏覽器来庭，右上角會(huì)有個(gè)react，點(diǎn)擊就可以查看啦
1585114552.jpg
注意：如果重啟后瀏覽器上還是沒有顯示react穿挨，是忘記勾選插件的 “允許訪問文件網(wǎng)址” 框了月弛。需要打開插件 =>詳細(xì)信息 => 允許訪問文件網(wǎng)址。重啟就可以了科盛。
1585115068.jpg
1585115118(1).jpg
