パフォーマンスモニタ@ChromeDevTools 。 CPU使用率、JSヒープサイズ、JSイベントリスナー、スタイルの再計算などをリアルタイムで表示します。
Chrome 64のDevToolsに追加される新機能は次のとおりです。
- パフォーマンスモニター。ページのパフォーマンスをリアルタイムで表示します。
- コンソールサイドバー。コンソールのノイズを減らし、重要なメッセージに集中します。
- 同様のコンソールメッセージをグループ化します。コンソールはデフォルトで同様のメッセージをグループ化するようになりました。
以下のリリースノートを読むか、ビデオバージョンをご覧ください。
注：で実行しているChromeのバージョンを確認してくださいchrome://version。以前のバージョンを実行している場合、これらの機能は存在しません。新しいバージョンを実行している場合は、これらの機能が変更されている可能性があります。Chromeは約6週間ごとに新しいメジャーバージョンに自動更新されます。
パフォーマンスモニター
パフォーマンスモニターを使用して、ページのロードまたはランタイムパフォーマンスのさまざまな側面をリアルタイムで表示します。
- CPU使用率。
- JavaScriptヒープサイズ。
- ページ上のDOMノード、JavaScriptイベントリスナー、ドキュメント、およびフレームの総数。
- 1秒あたりのレイアウトとスタイルの再計算。
アプリの動作が遅い、またはぎくしゃくしているとユーザーから報告されている場合は、パフォーマンスモニターで手がかりを確認してください。ロードパフォーマンスが重要な理由：BookMyShowは、速度を重視したプログレッシブWebアプリを作成したときに、コンバージョン数を80％増加させました。 詳細をご覧ください。
パフォーマンスモニターを使用するには：
- コマンドメニューを開きます。
- 入力
Performanceを開始し、を選択しますShow Performance Monitor。 図1。パフォーマンスモニター - 指標をクリックして、表示または非表示にします。図1に、CPU使用量、JSヒープサイズ、および JSイベントリスナーのグラフを示します。
関連機能：
- パフォーマンスパネル。重要なユーザージャーニーをウォークスルーし、JavaScriptアクティビティ、ネットワークリクエスト、CPU使用率など、ページで発生するすべてを記録します。ロードパフォーマンスの分析にも使用できます。 詳細をご覧ください。
- 監査パネル。任意のURLに対して、一連の自動ロードおよびランタイムパフォーマンステストを実行します。 詳細をご覧ください。
パフォーマンスの分析から始める場合は、最初に[ 監査 ]パネルを使用してから、[ パフォーマンス ]パネルまたは パフォーマンスモニターを使用してさらに調査することをお勧めします。
コンソールサイドバー
大規模なサイトでは、コンソールは無関係なメッセージですぐに溢れる可能性があります。新しいコンソールサイドバーを使用して 、ノイズを減らし、重要なメッセージに集中します。
コンソールのサイドバーはデフォルトで非表示になっています。[ コンソールサイドバーの表示]を クリックして表示します。
関連機能：
同様のコンソールメッセージをグループ化する
コンソールはデフォルトで同様のメッセージをグループ化するようになりました。たとえば、図3には、メッセージのインスタンスが27あります[Violation] Avoid using document.write()。
グループをクリックして展開し、メッセージの各インスタンスを表示します。
この機能を無効にするには、[ 類似のグループ]チェックボックスをオフにします。
関連機能：
- を使用して、独自のコンソールメッセージをグループ化できます
console.group()。
ローカルオーバーライド
おっと！私たちは当初、この機能をChrome 64でリリースするようにスケジュールしていましたが、いくつかの荒削りな部分を滑らかにするために、それを期限近くに引きました。どうやら、新着情報UIは時間内に更新されませんでした。ごめんなさい！
この機能はChrome 65で出荷され、Chrome 64の約6週間後にリリースされます。詳細については、ローカルオーバーライドを確認してください。WindowsまたはMacを使用している場合は、Chrome CanaryをダウンロードしてChrome 65を試すことができます。
この記事は Google Developers に掲載された「 What’s New In DevTools (Chrome 64) | Web 」を翻訳した内容です。
