Chrome Dev Tools でリアルタイムモニタリングする方法
はじめに
最近フロントエンドパフォーマンスチューニングについて色々調べるなかで
Chrome Dev Tools でリアルタイムングモニタリングできる「Performance Monitor Panel」という機能を見つけたので共有したいと思います。
Performance Monitor Panel とは
以下のメトリクスをリアルタイムモニタリングできる機能です。
- CPU 使用率
- JavaScript のヒープサイズ
- DOM ノード
- JavaScript イベントリスナー
- ドキュメント
- フレームの合計数。
- 1 秒あたりのレイアウトとスタイルの再計算。
見た目はこんな感じです。
使い方
1.「command + shift + p」で 「Performance Monitor」で検索
公式のドキュメントに記載されている手順です。
2.「More tools」から 「Performance Monitor」を選択
以下手順でも開くこともできます。
Performance Panel との併用方法
1. Performance Monitor Panel でパフォーマンス検証を行う
リアルタイム性を活かしてページ操作時に異常な増加や高い負荷がかかっている部分を特定します。
Performance Panel でも同じメトリクスがみれますが以下の理由で Performance Monitor Panel の方が適してそうです。
- 検証の度に「録画 ~ 停止 ~ プロファイル作成」を実行する必要がある。
- 長めに録画してるとプロファイルの作成に時間かかったりプロファイルが作成されず落ちるケースがある。
2. 問題があった部分のプロファイルを作成し解析する
Performance Panel で詳細をプロファイルし原因を探します。
Performance Panel の詳細については既に色んな方が書いているのでそちらを参考にしてください。
例
ボトルネックを発見する例として A / B / C / D の4つのボタンのパフォーマンスメトリクスを見るケースを想定します。
今回はボタンクリック時に DOM を追加する関数を実行するようにしてみました。
C ボタンのクリック時に、CPU 使用率、ヒープサイズ、DOM ノード数が急激に上昇していることが反映されていますね。
この例では、C ボタンクリック時の関数を見直すことで改善が期待できそうですが、プロダクション環境では処理が複雑に絡み合っているため詳細な分析には「Performance Panel」を利用して原因を特定する必要があります。
また、多くのサービスではボタンをクリックした後に「モーダルが開く → モーダル内で入力フォームに入力する → 「保存」をクリックする」といった一連の後続処理が定義されていることが多いと思います。
この場合、1 つのボタンに関連する処理に時間がかかるためプロファイル作成がうまくいかないことがあるため、リアルタイムでパフォーマンスを監視できる「Performance Monitor Panel」を使用する方が効果的そうです。
おわりに
2018年にリリースされた Chrome 64 で導入されてるみたいです。
少し前のリリースですが検索してもあまり出てこなかったので誰かの役に立つといいなと思ってます。
参考
Discussion