Reactime

用於 React 應用程式時間旅行偵錯與效能監控的 Chrome 擴充功能。 Reactime 曾獲得 React Open Source Awards 2020 生產力提升獎提名。 Reactime 是開放原始碼的 Chrome 開發者工具，可用於 React 應用程式的時間旅行偵錯與效能監控。Reactime 讓開發者記錄應用程式狀態快照、在快照之間跳轉並檢查狀態，還能監控元件渲染時間和渲染頻率等效能指標。 功能： - 記錄應用程式狀態和無障礙樹快照 - 適用於 useContext Hook 的 Provider/Consumer 面板 - 匯入及匯出狀態快照 - 時間旅行偵錯 - 快照序列比較 - 元件樹視覺化 - 相容 React Router - 元件渲染時間與頻率 - 支援 Gatsby、Next.js 和 Remix - 支援 TypeScript - 重新連線功能 - 網頁效能指標 - 教學導覽 - Prop 視覺化 - 直覺式版面與現代設計 - 深色模式 最新功能！ Reactime 26.0 推出重新定義 React 偵錯方式的重大更新。全新的 Providers/Consumers 面板可擷取並視覺化 useContext hooks 的狀態變化，即時顯示 provider-consumer 關係及目前的 context 狀態值。重新設計的時間旅行滑桿提供直覺導覽和播放選項，讓偵錯控制更完善。擴充功能也提供採用深色模式的現代化介面以改善易用性，透過修復關鍵錯誤提高可靠性，並恢復無障礙樹分頁以處理潛在的無障礙問題。透過這些創新，Reactime v26 讓開發者以前所未有的方式簡化工作流程並最佳化複雜的狀態流程。 疑難排解： ❓ 為什麼 Reactime 沒有記錄新的狀態變化？ Reactime 已與正在監控的分頁失去連線，只要點擊「reconnect」按鈕即可繼續工作。 ❓ 為什麼 Reactime 找不到我的 hooks？ Reactime 會在開發模式下遍歷應用程式未壓縮的 React 程式碼，以偵測和監控 hooks。如果建置程序會縮小或混淆程式碼，即使是開發建置也一樣，Reactime 可能無法正確找到並追蹤 hooks。解決方法如下： 確保使用真正的開發建置：再次檢查打包工具或建置工具設定（例如 Webpack、Babel、Vite 等），確保應用程式在開發模式下未被縮小或混淆。 例如，使用 Webpack 時，請確認以 mode: 'development' 執行，這應會停用預設的程式碼縮小。 在 Create React App 專案中，只要執行 npm start 或 yarn start，就會自動設定未縮小的開發建置。 檢查覆寫設定：確認沒有自訂 Babel 或 Webpack 外掛縮小程式碼，特別是在使用 Next.js 或 Gatsby 等框架時。有時其他外掛或指令碼可能在背景執行。 重新啟動與建置：變更任何建置設定後，請重新建置或重新啟動開發伺服器，確保新設定生效。接著重新整理瀏覽器分頁，讓 Reactime 偵測未縮小的 hooks。 變更任何建置設定後，請重新建置或重新啟動開發伺服器，確保新設定生效。接著重新整理瀏覽器分頁，讓 Reactime 偵測未縮小的 hooks。 ❓ 為什麼 Reactime 告訴我找不到 React 應用程式？ Reactime 一開始使用 Chrome API 的開發者工具全域 hook 執行。Chrome 載入它需要時間。請嘗試重新整理應用程式幾次，直到看到 Reactime 運作。 ❓ 為什麼需要啟用 React Dev Tools？ Reactime 與 React Developer Tools 協同運作以存取 React 應用程式的 Fiber 樹；其內部會透過 React Developer Tool 的全域 hook 遍歷 Fiber 樹，取得顯示給開發者所需的所有相關資訊。 ❓ 我在 Reactime 中發現錯誤 Reactime 是開放原始碼專案，我們歡迎您提供改善使用者體驗的意見。請閱讀 👩‍💻 開發者 README，並建立 pull request（或 issue）來提議及協作修改 Reactime。