谷歌 安裝 react-devtools 詳細步驟

最近想學一下react,在谷歌上面安裝react-devtools時看了一些博客,說的比較詳細的沒有幾個,後面在博客園看到一篇有詳細步驟+截圖的博客。

https://www.cnblogs.com/Ewarm/p/12010716.html

開始

安裝react-devtools前必須保證本地已安裝好Git和node.js,至於Git和node.js的安裝方式請自行百度!

1.首先打開官網:https://github.com/facebook/react-devtools

滑至底部,在 README.md下點擊v3 branch

 

2.直接下載 v3 ZIP安裝包,這邊試過直接複製上圖的鏈接使用git進行clone會下不到v3的版本。


3.下載完成以後
//切換到工程目錄

cd react-devtools-3


//安裝依賴 

cnpm i


4.安裝完成後切換目錄

//切換到chrome目錄下

cd shells/chrome


5.生成擴展程序包

在shells/chrome 目錄運行node build.js。

運行完成後在該目錄下會生成build目錄,這個build目錄下的unpacked目錄就是chrome中所需react-devtools的工具擴展程序包。

6.在chrome瀏覽器中安裝react-devtools(這邊有兩種安裝方式)
方法1:接着上面的第五步,將目錄切換到react-devtools-3目錄下:
運行命令npm run test:chrome


此時會自動安裝react-devtools 並打開chrome瀏覽器

在瀏覽器右上角的工具欄裏打開->更多工具->擴展程序裏就可以看到我們安裝成功了

 

方法二2:打開chrome瀏覽器 並打開擴展程序,在擴展程序中開啓開發者模式,點擊加載已解壓的擴展程序,將在shells/chrome/build目錄下生成的unpacked安裝包進行加載即可。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章