如何使用React Developer Tools

在建立React應用程式時，例如使用Next.js建立的應用程式，React Developer Tools是一個絕對必要安裝的工具。

React Developer Tools提供了一個檢查React應用程式的工具，可以顯示React元件樹狀結構，並且可以查看每個元件的props、state、hooks等等。

安裝好React Developer Tools後，你可以打開瀏覽器的開發人員工具（在Chrome中，右鍵點擊頁面，然後點擊Inspect），你會發現兩個新的面板：Components（元件）和Profiler（性能分析）。

如果你將滑鼠移動到元件上，瀏覽器會在頁面上選擇由該元件渲染的部分。如果你在樹狀結構中選擇任何元件，右側的面板將顯示對應元件的父元件和傳遞給它的props：

你可以輕鬆地通過點擊元件名稱來進行導航。

你可以點擊開發人員工具工具欄中的眼睛圖標來檢查DOM元素，如果你使用第一個圖標（方便地位於類似常規DevTools圖標下方的滑鼠圖標），你可以將滑鼠懸停在瀏覽器UI中的元素上，以直接選擇渲染該元素的React元件。

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

這非常棒，因為一旦你將數據打印出來，在控制台中你可以右鍵點擊任何元素，然後選擇“存儲為全局變量”。例如，我在此示例中使用了url prop，並且我能夠在控制台中通過臨時變量temp1來檢查它：

使用Next.js自動加載的Source Maps（在開發模式下），從元件面板中，我們可以點擊<>代碼，DevTools會切換到Source面板，並顯示元件的源代碼：

Profiler（性能分析）標籤更加出色，如果可能的話。它允許我們記錄應用程式中的交互並查看發生了什麼。我現在還無法展示一個例子，因為至少需要兩個元件來創建一個交互。我稍後會談到這個。

我展示的所有截圖都是使用Chrome，但是React Developer Tools在Firefox中的工作方式是相同的：
tags: [“React”, “React Developer Tools”, “debugging”, “performance”]