v19.2Latest

React 開發者工具

使用 React 開發者工具來檢查 React元件、編輯props 與 state，並識別效能問題。

瀏覽器擴充功能

偵錯使用 React 建構的網站最簡單的方法是安裝 React 開發者工具瀏覽器擴充功能。它適用於多種主流瀏覽器：

現在，如果您造訪一個使用 React 建構的網站，您將會看到 Components 與 Profiler面板。

對於其他瀏覽器（例如 Safari），請安裝react-devtoolsnpm 套件：

接著從終端機開啟開發者工具：

然後，透過在您網站的 <script> 標籤到網站 <head>的開頭，來連接您的網站：

現在在瀏覽器中重新載入您的網站，即可在開發者工具中檢視它。

若要檢查使用 React Native建構的應用程式，您可以使用React Native DevTools，這是深度整合了 React 開發者工具的內建偵錯器。所有功能都與瀏覽器擴充功能完全相同，包括原生元素的高亮顯示與選取。

對於 React Native 版本早於 0.76 的情況，請遵循上述的Safari 與其他瀏覽器指南，使用 React DevTools 的獨立建置版本。