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

注意事項

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

react devtools使用方法

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

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

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

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

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

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

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

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