注:其實React官方提供了瀏覽器擴展插件react-devtools(下載地址:https://fb.me/react-devtools),但是需要FQ,有FQ條件的可以直接在官方下載。
下面介紹的是直接在GitHub上把插件源代碼拉下
git clone https://github.com/facebook/react-devtools.git
也可以直接下載代碼zip文件,我就是直接下載的zip文件:
然后解壓,進入項目后,安裝依賴:
依賴安裝完成之后,進入項目的shells\chrome目錄下:
cd shells\chrome
在這個目錄下,執行:
node build.js
執行結果顯示如下:
這個時候在這個目錄下,會生成一個build文件夾,這個文件夾的內容如下:
圖中框起來的部分就是瀏覽器可用的擴展插件。
然后在瀏覽器中打開chrome://extensions/:
選擇剛剛生成的文件夾中的unpacked文件夾,點擊確認,然后就出來啦:
就這么簡單,這個時候在你打開的react項目頁面中,控制台就多了一項React:
如果你發現在你控制台上面沒有出現React,這個時候先關閉控制台,再次打開控制台,就有啦!