OffiDocs を使用した Chrome での Reactime

説明：

OffiDocs Chromium オンラインを使用して、Chrome オンライン Web ストア拡張機能 Reactime を実行します。

Reacttime は、React Open Source Awards 2020 の Productivity Booster アワードにノミネートされました。

https://www.

反応します。

me/ Reactime は、React アプリケーションでのタイム トラベルのデバッグとパフォーマンスの監視のためのオープン ソースの Chrome 開発者ツールです。

Reactime を使用すると、開発者はアプリケーション状態のスナップショットを記録し、状態のスナップショット間をジャンプして検査し、コンポーネントのレンダリング時間やレンダリング頻度などのパフォーマンス メトリックを監視できます。

反応時間 18.

0 では、パフォーマンスの向上と Next との互換性の強化を目的とした、さまざまな新機能と改良された機能が導入されています。

js および Remix アプリケーション。

また、ブラック スクリーンのバグを修正し、非同期呼び出しのメモリ使用量を最適化しました。

ルートによる状態スナップショットの分類 Reactime ダッシュボードの状態スナップショットのリストは、開発者にスナップショットとルートの関係の視覚的な手がかりを提供し、さまざまなルートのタイム トラベルのデバッグを容易にするために、ルートによって分類されるようになりました。

ルートによるパフォーマンス メトリックのフィルタリング Reactime ダッシュボードには、各コンポーネントのレンダリング時間を示す積み上げ棒グラフと、スナップショットごとに個別の積み上げ棒グラフが含まれています。

Reacttime 14 で。

0、この複合棒グラフをルートでフィルタリングして、開発者がルートごとの詳細なパフォーマンス データを確認できるようになりました。

機能: - React Router の互換性 - コンポーネント ツリーの視覚化 - アプリケーション状態のスナップショットの記録 - タイム トラベル デバッグ - スナップショット シリーズの比較 - コンポーネントのレンダリング時間と頻度 - Gatsby、Next のサポート。

js と Remix - TypeScript のベータ サポート - チュートリアル ウォークスルー トラブルシューティング: React アプリケーションが見つからないという Reactime のメッセージが表示されるのはなぜですか? Reactime は、最初は Chrome API の開発ツール グローバル フックを使用して実行されます。

Chrome がこれをロードするのに時間がかかります。

Reactime が実行されていることがわかるまで、アプリケーションを数回更新してみてください。

Reactime 拡張機能の代わりに黒い画面が表示されます。

テストするアプリケーションを更新し、マウスの右ボタン「フレームの再読み込み」をクリックして DevTools を更新してみてください。

Reactime にバグが見つかりました。

Reactime はオープン ソース プロジェクトです。ユーザー エクスペリエンスの向上にご協力をお願いいたします。

プル リクエスト (またはイシュー) を作成して、リポジトリへの変更を提案し、協力してください。

参考文献: https://medium.

com/@zdf2424/reactime-18-0-better-than-ever-148b81606257 https://medium.

com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20 https://medium.

com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8 https://medium.

com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802 https://itnext.

io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb https://rxlina.

中。

com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319 https://medium.

com/@liuedar/what-time-is-it-reactime-fd7267b9eb89 https://medium.

com/@christinaor/uncovering-reacttime-understanding-react-fiber-redux-compatibility-and-zoning-in-on-components-59f0758e0fa3

追加情報：

- Reacttime提供
- 平均評価 : 4.7 つ星 (とても気に入りました)
-開発者 このメールアドレスは、スパムロボットから保護されています。 アドレスを確認するにはJavaScriptを有効にする必要があります。

OffiDocs Chromium オンラインと統合された Reactime Web 拡張機能