如何使用React Developer Tools

了解這個非常有用的工具,我們在構建React應用程序時絕對需要安裝該工具。

React開發人員工具是我們在構建React應用程序時絕對需要安裝的一個非常有用的工具,例如Next.js應用程序。

兩者都可用鉻合金火狐瀏覽器,React Developer Tools是可用於檢查React應用程序的基本工具。

他們提供了一個檢查器,該檢查器揭示了構建頁面的React組件樹,對於每個組件,您都可以檢查道具,狀態,掛鉤等等。

一旦安裝了React Developer Tools,就可以打開常規的瀏覽器devtools(在Chrome中,右鍵單擊頁面,然後單擊Inspect),您會發現2個新面板:成分探查器

如果將鼠標移到組件上,則會在頁面中看到,瀏覽器將選擇該組件渲染的部分。

如果您在樹中選擇任何組件,則右側面板將顯示對父組件,道具傳遞給它:

您可以通過在組件名稱周圍單擊來輕鬆導航。

您可以單擊“開發人員工具”工具欄中的眼睛圖標來檢查DOM元素,如果您使用的是第一個圖標(帶有鼠標圖標的圖標,該圖標通常位於類似的常規DevTools圖標下),則可以將元素懸停在瀏覽器用戶界面以直接選擇呈現它的React組件。

您可以使用bug圖標將組件數據記錄到控制台。

這非常棒,因為一旦在其中打印了數據,就可以右鍵單擊任何元素,然後按“存儲為全局變量”。例如,在這裡我用url道具,我可以使用分配給它的臨時變量在控制台中對其進行檢查,temp1

使用源地圖,它是由Next.js在開發模式下自動加載的,在“組件”面板中,我們可以點擊<>代碼,DevTools將切換到“源代碼”面板,向我們顯示組件源代碼:

探查器如果可能的話,標籤會更棒。它使我們能夠記錄互動在應用程序中,然後查看會發生什麼。我無法顯示一個示例,因為它至少需要2個組件才能創建交互,而現在只有一個。稍後再說。

我使用Chrome瀏覽器顯示了所有屏幕截圖,但是React Developer Tools在Firefox中的工作方式相同:

免費下載我的反應手冊


更多反應教程: