皆さん Microsoft Edge の開発者ツールは触ったことがありますか？
Edge でサイトを見ているときに F12 キーを押すと出てくる機能です。
この機能は、サイトの中にある要素を見つけ出したり、ソースコードとの紐づけをチェックしたり、 javascript のデバッグなども行える高機能な作りとなっています。
その中でもパフォーマンスツールは、動きの確認やネットワークの解決状況、キャッシュの利用などを確認することが出来るため、開発者ではない場合でも利用することが多いのではないでしょうか。
まだ使ったことのない人も是非今すぐに F12 を押して動かしてみましょう笑
そのパフォーマンスツールですが、設定の中に Enable advanced rendering instrumentation (slow) という項目が新たに設けられるようになりました。
この設定を入れて左側にある録画ボタンを押すと以下のように画面状態のレコーディングが開始されるのです。
開始されたらサイトをいろいろ動かしてみましょう。
slow と書かれているように、数秒の情報を取得して停止ボタンを押すとプロファイルの読み込みが始まるのですが、かなり時間がかかります。イメージはネットワークパケットキャプチャのような感じですかね。
読み込みが完了すると以下のような画面が表示されます。
これはレコーディング中の時間軸において、 Edge によって行われたことが細かく書かれている画面になっています。
通常のパフォーマンスツールでの録画は、録画を開始したそのあとに読み込みすることで動作を見ることが出来たのですが、このチェックを入れておくと時間ごとに起きたイベントを拾ってくれるようです。
タイムラインをポイントするとこんな感じにその時点で表示されていた画面が出てきたりします。面白いですね、これ。
実はこの機能、画面の中で CSS スタイルの再描写に向けた計算を行うところにメスを入れるための機能みたいなのです。
スタイル関連のタスクをクリックすると、下部にセレクターの統計というタブが出てきて、どれくらい CSS セレクターを確認したのか統計を見ることが出来るようになっています。
この詳細は以下の Blog にも書かれており、詳しくこの利用価値を教えてくれているので、ぜひ一読してみるとよいでしょう。
Edge 、いろいろ奥深くて面白いですね！
音楽：干戈の交わり
