React Developer Tools

React Developer Tools是一款可以查看和調(diào)試React組件的瀏覽器插件，該插件可以從谷歌瀏覽器擴(kuò)展程序安裝，也可以直接綠色資源網(wǎng)提供的文件喲，需要的朋友趕緊來(lái)綠色資源網(wǎng)下載吧

注意事項(xiàng)

該插件只對(duì) ReactJS 開(kāi)發(fā)有效。如果是 React Native 的話則無(wú)法使用這個(gè)插件調(diào)試。

react devtools使用方法

1.安裝成功后，瀏覽器的右上方出現(xiàn)現(xiàn)圖示的log，用戶如果想要調(diào)試的話就點(diǎn)擊log就可以了。

通過(guò)選擇樹(shù)中的一個(gè)組件，你可以在右邊的面板中檢查和編輯它的當(dāng)前的道具和狀態(tài)。在面包屑，你可以檢查所選組件，創(chuàng)建它的組件，創(chuàng)建一個(gè)組件，等等。如果您使用常規(guī)元素選項(xiàng)卡檢查頁(yè)面上的一個(gè)反應(yīng)元素，然后切換到“React”選項(xiàng)卡，該元素將在“React樹(shù)”中自動(dòng)選擇。

2.類似地，如果在一個(gè)組件的渲染階段有一個(gè)斷點(diǎn)，將在“React”選項(xiàng)卡中自動(dòng)選擇。這允許你在渲染樹(shù)中一步一步看到一個(gè)組件如何影響另一個(gè)。通過(guò)打破錯(cuò)誤，你可以很容易地找到哪些組件在渲染過(guò)程中拋出一個(gè)錯(cuò)誤，和什么樣的道具導(dǎo)致它。

谷歌瀏覽器擴(kuò)展程序安裝方法

（1）點(diǎn)擊 Chrome 的“菜單”->“更多工具”->“擴(kuò)展程序”。

（2）在打開(kāi)的“擴(kuò)展程序”頁(yè)面中，點(diǎn)擊最下方的“獲取更多擴(kuò)展程序”打開(kāi)谷歌在線商店。

（3）最后搜索“React Developer Tools”并安裝即可。

（4）安裝完畢后打開(kāi)擴(kuò)展程序管理頁(yè)面。將 React Developer Tools 的“允許訪問(wèn)文件網(wǎng)址”勾選。