メモ：What's New In DevTools (Chrome 78)

しばらくDevToolsのアップデートを確認していなかった。
かなり前のものだけれど、78のアップデート内容を確認してみる。

元情報

Auditsパネルがリクエストブロッキングやローカルオーバーライドなどの別機能と連携してくれるようになった。

これにより、レンダリングをブロックするしているリソースをDevTools上で消してからパフォーマンスを再計測することができ便利。

たとえば、誰も使っていないjQueryが読み込まれていて、消したらどうなるのか確かめてみたいとき、
コンソールを出し（Ctrl + Shift + P などで）、「Show Request Blocking」のコマンドを叩き、
タブの中で「jquery」をブロック対象に設定する。

ほかにもいくつかのライブラリにasync属性をつけてみたいときには、「Show Overrides」のコマンドを叩いて、Desktopなどにに変更後のファイルを保存する。

そしてAuditsを使うと、パフォーマンスが良くなっているのを確認できる。

ApplicationパネルでPayment Handlerイベントがサポートされた。

Background Servicesの欄に追加されているので、そこで確認いろいろできる。
Devtools閉じていても、アクティビティを記録しておけるらしい。

Third-Party Usageの項目が追加された。どれだけサードパーティーコードのリクエストがあるのか、読み込み時にどれだけメインスレッドをブロックしているのかがわかる。

PerformanceパネルでLargest Contentful Paint in the Performance panelのマーカーが追加された。 viewport内で一番大きいコンテンツ要素が表示されたときのレンダリング時間がわかる。

Main Menu > Help のところに Report a DevTools issue の項目が追加された。何かあったらここから報告してほしいとのこと。