螢幕截圖

詳細介紹

將 React 偵錯工具加入 Chrome 開發人員工具。 以修訂版本 1d34f91dfd 建置。 React Developer Tools 是適用於開放原始碼 React JavaScript 函式庫的 Chrome 開發人員工具擴充功能。它讓你可以在 Chrome 開發人員工具中檢查 React 元件的階層結構。 你的 Chrome 開發人員工具中會新增兩個分頁：「Components ⚛」和「Profiler ⚛」。 Components 分頁會顯示頁面上已呈現的根 React 元件，以及這些元件最後呈現的子元件。 在樹狀結構中選取其中一個元件後，你可以在右側面板檢查及編輯該元件目前的 props 和狀態。在麵包屑導覽中，你可以檢查所選元件、建立該元件的元件、再上一層建立該元件的元件，依此類推。 如果你使用一般的 Elements 分頁檢查頁面上的 React 元素，接著切換到 React 分頁，系統就會自動在 React 樹狀結構中選取該元素。 Profiler 分頁讓你可以錄製效能資訊。 此擴充功能需要取得存取頁面 React 樹狀結構的權限，但不會將任何資料傳送至遠端。它完全開放原始碼，你可以在 https://github.com/facebook/react/tree/main/packages/react-devtools-extensions 找到原始碼。