chrome安裝react-devtools開發工具

我開始安裝react-devtools的時候 百度了一波，都是寫的不清不楚，官網又都是英文的 也不是完全理解，經過一番折騰出來以后，寫個文檔記錄一下，也可避免新手首次安裝走彎路

我安裝react-devtools的前提是本地安裝了git 以及node 我相信准備學react的同學，應該都有了解使用

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

先已經切換到

 

 

https://github.com/facebook/react-devtools/tree/v3

 

 

 

2.本地打開git bash 然后復制上面的github下載鏈接
在git中輸入：
git clone https://github.com/facebook/react-devtools.git
3.克隆完成以后
cd react-devtools //切換到工程目錄
cnpm i //安裝依賴
4.安裝完成以后切換目錄
cd shells/chrome //切換到chrome目錄下
5.然后運行node build.js 當前目錄下會生成build目錄 這個build目錄下的unpacked目錄就是chrome中所需react-devtools的工具擴展程序包

到這里有兩種方式在chrome瀏覽器中安裝react-devtools
方法一：6.1 接着上面的第五步 在git中將目錄切換到react-devtools目錄下：
運行命令npm run test:chrome
此時會自動安裝react-devtools 並打開chrome瀏覽器

 

 

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

 

 

方法二：6.2:打開chrome瀏覽器 如6.1打開擴展程序
進行如下操作：

 

 

打開開發者模式按鈕 選擇‘’加載已解壓擴展程序‘’選擇react-detools目錄下的shells->chrome中build目錄中的unpacked即可

到此 react-devtools安裝成功

轉鏈接：https://www.jianshu.com/p/8afd06135fd5
來源：簡書