瀏覽器支持情況
??支持Chrome和Firefox瀏覽器
一相种、下載
??官網(wǎng)地址:https://github.com/facebook/react-devtools
??下載react-devtools-master文件夾到本地
二患亿、npm安裝依賴
??進(jìn)入到react-devtools-master文件夾,用npm安裝依賴距境。
npm --registry https://registry.npm.taobao.org install
三、打包擴(kuò)展程序
??安裝依賴成功后垮卓,用npm打包一份擴(kuò)展程序垫桂。
npm run build:extension:chrome
四、在Chrome安裝擴(kuò)展程序
??1粟按、chrome瀏覽器輸入chrome://extensions/ ,打開chrome的擴(kuò)展程序頁面诬滩。
??2霹粥、將react-devtools-master -> shells -> chrome -> build -> unpacked ;將unpacked文件夾拖到1中打開的擴(kuò)展程序頁面疼鸟。
??3后控、安裝成功后檢查配置:【詳細(xì)信息】 — 【允許訪問文件網(wǎng)址】開啟
1
2
五、使用
??1空镜、打開一個(gè)react項(xiàng)目
??2浩淘、首次一定要通過右上角—更多工具(L)—開發(fā)者工具(D) ,后期可直接右鍵瀏覽器,點(diǎn)擊“檢查”即可姑裂。
??注意:首次第一要打開開發(fā)者工具哦馋袜,直接右鍵“檢查”會(huì)不出現(xiàn)react標(biāo)識(shí)的。
打開開發(fā)者工具
??3舶斧、點(diǎn)擊開發(fā)工具中的React即可看到效果啦欣鳖。
效果圖