DevTools(Chrome 64)の新機能

DevTools(Chrome 64)の新機能 SEO情報
SEO情報
この記事は約4分で読めます。

パフォーマンスモニタ@ChromeDevTools 。 CPU使用率、JSヒープサイズ、JSイベントリスナー、スタイルの再計算などをリアルタイムで表示します。


Chrome 64のDevToolsに追加される新機能は次のとおりです。

以下のリリースノートを読むか、ビデオバージョンをご覧ください。

注:で実行しているChromeのバージョンを確認してくださいchrome://version。以前のバージョンを実行している場合、これらの機能は存在しません。新しいバージョンを実行している場合は、これらの機能が変更されている可能性があります。Chromeは約6週間ごとに新しいメジャーバージョンに自動更新されます。

パフォーマンスモニター

パフォーマンスモニターを使用して、ページのロードまたはランタイムパフォーマンスのさまざまな側面をリアルタイムで表示します。

  • CPU使用率。
  • JavaScriptヒープサイズ。
  • ページ上のDOMノード、JavaScriptイベントリスナー、ドキュメント、およびフレームの総数。
  • 1秒あたりのレイアウトとスタイルの再計算。

アプリの動作が遅い、またはぎくしゃくしているとユーザーから報告されている場合は、パフォーマンスモニターで手がかりを確認してください。ロードパフォーマンスが重要な理由:BookMyShowは、速度を重視したプログレッシブWebアプリを作成したときに、コンバージョン数を80%増加させました。 詳細をご覧ください

パフォーマンスモニターを使用するには:

  1. コマンドメニューを開きます
  2. 入力Performanceを開始し、を選択しますShow Performance Monitor。 図1。パフォーマンスモニター
  3. 指標をクリックして、表示または非表示にします。図1に、CPU使用量JSヒープサイズ、および JSイベントリスナーのグラフを示します。

関連機能:

  • パフォーマンスパネル。重要なユーザージャーニーをウォークスルーし、JavaScriptアクティビティ、ネットワークリクエスト、CPU使用率など、ページで発生するすべてを記録します。ロードパフォーマンスの分析にも使用できます。 詳細をご覧ください
  • 監査パネル。任意のURLに対して、一連の自動ロードおよびランタイムパフォーマンステストを実行します。 詳細をご覧ください

パフォーマンスの分析から始める場合は、最初に[ 監査 ]パネルを使用してから、[ パフォーマンス ]パネルまたは パフォーマンスモニターを使用してさらに調査することをお勧めします。

コンソールサイドバー

大規模なサイトでは、コンソールは無関係なメッセージですぐに溢れる可能性があります。新しいコンソールサイドバーを使用して 、ノイズを減らし、重要なメッセージに集中します。

コンソールのサイドバーを使用してエラーメッセージのみを表示する
コンソールのサイドバーを表示

コンソールのサイドバーはデフォルトで非表示になっています。[ コンソールサイドバーの表示]を クリックして表示します。

関連機能:

  • フィルターテキストボックス。テキストを入力すると、コンソールにはそのテキストを含むメッセージのみが表示されます。正規表現パターン、除外フィルター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 」を翻訳した内容です。

コメント

タイトルとURLをコピーしました