ARUI DevTools: ARUI マイクロフロントエンドデバッグ用の Chrome DevTools パネル
ARUI DevToolsは、Alfa-Bank（Alfa Digital/Alfa-Laboratoryチーム）によって開発されたChrome拡張機能で、ARUIライブラリを使用してマイクロフロントエンドを構築するフロントエンド開発者向けです。モジュールがどのように取得され、バージョン管理され、実行されるかを示す専用のDevToolsタブを追加し、タイムラインとリソースタイミングビュー、さらに永続的なログを提供します。この拡張機能は、分散モジュールの読み込みと起動シーケンスを可視化する必要があるARUI/arui-scriptsエコシステム内で働くエンジニアを対象としています。
ARUI DevToolsは何に使われますか？
このツールはARUIベースのプロジェクトのマイクロフロントエンド診断に焦点を当てています。モジュールマニフェスト、ソース、および読み込まれたバージョンを表示する新しいDevToolsタブを統合しており、開発者はアプリが実行時に使用したモジュールインスタンスを検査できます。その特異性により、この拡張機能はARUIコンポーネントライブラリとarui-scriptsに依存するチームに適しています。
モジュールとエラーの可視性はどのように処理されますか？
モジュールの失敗をDevTools内の実行可能なスタックトレースにマッピングします。エラーセクションは失敗の段階をキャプチャし、ブラウザのソースパネルでファイルを開くクリック可能なスタックフレームを提供します。これにより、エンジニアはエラー行から対応するソースファイルにツールを切り替えることなくジャンプできます。モジュールテーブルはソースマニフェストとバージョンをリストし、エラーを特定のバンドルに結びつけます。
ロードタイミングの記録とデータの永続性はどの程度ですか？
並行ロードを記録し、早期ブート分析のためにリロード間で記録を保持します。タイムラインの視覚化は同時リソースリクエストとキューのボトルネックを強調し、リソースタイミングの内訳はロード段階の一時停止を示します。ページのリフレッシュを通じてタイムラインとロードデータの永続性は、従来のパネルがキャプチャできる前に発生する問題をキャッチするのに役立ちます。
誰がインストールすべきか、そしてその理由
ARUI DevToolsは、モジュール解決とスタートアップシーケンスのエンドツーエンドの可視性を必要とするARUIマイクロフロントエンドスタックに埋め込まれたフロントエンドエンジニアのためのニッチで実用的なオプションです。失敗したロードから責任のあるモジュールとソースファイルへの道を短縮する集中した拡張機能を期待してください。ARUIエコシステム外の開発者にとって、この拡張機能は標準のDevToolsパネルと比較してほとんど付加価値を提供しません。
