やあ!繰り返しになりますが、DevTools のテクニカル ライターである Kayce です。この DevTools ダイジェストでは、これを少し変更して、過去数年間の Chrome リリースにおける DevTools のパフォーマンス ツールの改善についてまとめます。
特に記載のない限り、すべての機能は Stable 版です。
モバイルファーストの世界に向けた CPU スロットリング
Chrome 54(現在は Canary)で利用できます。
ソフトウェアは世界を席巻し、モバイルはソフトウェアを席巻しています。DevTools は、モバイルファーストの開発世界のニーズにより的確に応えるために着実に進化しています。DevTools のモバイルファースト ツールの最新の開発は、CPU スロットリングです。この機能を使用すると、リソースが制限されたデバイスでのサイトのパフォーマンスをより詳細に把握できます。
[Timeline] パネルの [CPU Throttling] プルダウン メニューからいずれかのオプションを選択して、開発マシンのコンピューティング能力を制限します。
![ALT_TEXT_HERE](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/alttexthere-4d2a07a478acb.png?authuser=6&hl=ja)
CPU スロットリングに関する注意事項:
- ネットワーク スロットリングと同様に、スロットリングはすぐに有効になり、無効にするまで継続されます。
- この機能は、リソースが制限されたデバイスでのサイトのパフォーマンスを全般的に把握するためのものです。DevTools でモバイル システム オン チップのパフォーマンス特性を真にエミュレートすることは不可能です。
- スロットリングは開発マシンに応じて行われます。つまり、最上位のデスクトップでの 5 倍のスロットリングは、5 年前の低価格ノートパソコンの 5 倍のスロットリングとは異なる結果をもたらすことになります。
とはいえ、CPU スロットリングをネットワーク スロットリングやデバイス モードと組み合わせると、開発マシンのブラウザの利便性から直接、モバイル デバイスでのサイトの表示やパフォーマンスをより正確に把握できるようになります。
タイムライン録画のネットワーク ビュー
次回タイムラインを記録する際に [ネットワーク] チェックボックスをオンにすると、ページでリソースがどのようにダウンロードされたかを分析できます。リソースをクリックすると、その詳細情報が [Summary] ペインに表示されます。
![タイムラインのネットワーク ビュー](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/network-view-timeline-b37a7ed4d8b.png?authuser=6&hl=ja)
サマリーの [Initiator] フィールドは特に有用です。このフィールドは、リソースがリクエストされている場所を示します。
パッシブなイベント リスナー
パッシブなイベント リスナーは、スクロールのパフォーマンスを向上させる新たな標準です。詳しくは、こちらの記事をご覧ください。
パッシブ イベント リスナーでスクロールのパフォーマンスを向上
DevTools には、{passive: true}
へのちょっとした愛からメリットを得られるリスナーを見つけるのに役立つ機能がいくつか用意されています。
まず、同期リスナーがページのスクロールを不当な時間にわたってブロックすると、コンソールで警告が表示されます。
![同期リスナーに関する警告](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/synchronous-listener-warn-0e6fbc2a7bf36.png?authuser=6&hl=ja)
以下のデモで実際に試すことができます。
次に、[Event Listeners] ペインの小さなプルダウン メニューを使用して、パッシブ リスナーやブロッキング リスナーをフィルタします。
![パッシブ リスナー フィルタ](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/passive-listeners-filter-dec2e483dc09.png?authuser=6&hl=ja)
最後に、リスナーにカーソルを合わせて [Toggle Passive] を押すと、そのリスナーのパッシブ状態とブロック状態を切り替えることができます。この機能は現在、touchstart
、touchmove
、mousewheel
、wheel
のイベント リスナーに限定されています。
![パッシブに切り替える](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/toggle-passive-5b52cd4553b19.png?authuser=6&hl=ja)
ヒントでこのセクションを締めくくります。レンダリング ドロワーの [Scrolling Performance Issues](スクロールのパフォーマンスに関する問題)チェックボックスをオンにすると、スクロールに関する潜在的な問題を視覚的に確認できます。ページのあるセクションがハイライト表示されているということは、スクロールのパフォーマンスに悪影響を与える可能性のある、ページのそのセクションにバインドされているリスナーがあるということです。
![スクロールのパフォーマンスに関する問題のデモ](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/scrolling-performance-iss-b5baa74fac517.gif?authuser=6&hl=ja)
アクティビティ別にグループ化
6 月中旬に、[Timeline] パネルの [Call Tree] ペインに [Group by Activity] という新しい並べ替えカテゴリが追加されました。グループ化すると、ページが HTML の解析、スクリプトの評価、ペイントなどに費やした時間を確認できます。
![アクティビティ別にグループ化](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/group-activity-28e0f3f6c9ebf.png?authuser=6&hl=ja)
ソースパネルのタイムライン統計情報
[JS Profile] オプションを有効にしてタイムライン記録を作成すると、[Sources] パネルで実行時間の関数ごとの内訳を確認できます。
![ソースパネルのタイムライン統計情報](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/timeline-stats-sources-p-d1443a034c712.png?authuser=6&hl=ja)
ご意見をお寄せください
これまでどおり、DevTools に関するフィードバックやアイデアがありましたら、ぜひお聞かせください。
- ご不明な点やフィードバック、新しいアイデアがありましたら、Twitter の ChromeDevTools までお知らせください。
- 長時間のディスカッションには、メーリング リストまたは Stack Overflow をご利用になることをおすすめします。
- ドキュメント関連の問題については、ドキュメント リポジトリでイシューを作成してください。
来月まで!