React安裝React Devtools調試工具


 

 

 

在運行一個React項目的時候瀏覽器控制台會提醒你去安裝react devtools調試工具。

Download the React DevTools for a better development experience: https://fb.me/react-devtools

看到瀏覽器控制台這種說明,很是不舒服,於是就安裝了react devtools瀏覽器擴展插件。

https://fb.me/react-devtools 此鏈接打不開,應該需要翻牆。

所以還是直接從github上面下載:https://github.com/facebook/react-devtools

1.git上下載react-devtools文件到本地: git clone https://github.com/facebook/react-devtools

 

2.進入到react-devtools文件夾,用npm安裝依賴。

cd react-devtools

npm --registry https://registry.npm.taobao.org install

..............................華麗的省略號................................

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-errors@1.0.1 requires a peer of ajv@>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
added 1833 packages from 819 contributors in 38.076s   //success

3.安裝依賴成功后,打包程序擴展;npm run build:extension:chrome

出現這個就說明安裝成功了。

並且會在你的項目中生成一個新的文件夾:react-project⁩ ▸ ⁨react⁩ ▸ ⁨react-devtools⁩ ▸ ⁨shells⁩ ▸ ⁨chrome⁩ ▸ ⁨build⁩

4.打開Chrome擴展程序chrome://extensions/,加載已解壓的擴展程序,選擇第三部生成的unpacked文件夾。這時就會添加一個新的擴展程序react-devtools,並在你的瀏覽器右上角會有一個react標志,代表安裝成功。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM