DevTools の新機能（Chrome 64）

Kayce Basques

ご利用の再開ありがとうございます。Chrome 64 の DevTools に追加される新機能は次のとおりです。

この記事を読み進めるか、または下にあるこれらのリリースノートの動画版をご覧ください。

パフォーマンス モニター

Performance Monitor を使用すると、ページの読み込みやランタイム パフォーマンスのさまざまな側面（以下を含む）をリアルタイムで確認できます。

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

アプリが遅い、ぎくしゃくしているという報告がユーザーから寄せられた場合は、パフォーマンス モニターで手がかりを探します。

読み込み速度が重要な理由: BookMyShow は、速度に重点を置いたプログレッシブ ウェブアプリを構築した結果、コンバージョンが 80% 増加しました。詳細

パフォーマンス モニターを使用する手順は次のとおりです。

  1. コマンド メニューを開きます。

  2. 「Performance」と入力し、[Show Performance Monitor] を選択します。

    パフォーマンス モニター 図 1。パフォーマンス モニター

  3. 指標をクリックして、表示または非表示にします。図 1 に、CPU 使用率、JS ヒープサイズ、JS イベント リスナーのグラフを示します。

関連する機能:

  • [パフォーマンス] パネル。重要なユーザー ジャーニーを検証し、JavaScript アクティビティ、ネットワーク リクエスト、CPU 使用率など、ページ上で発生するすべてのことを記録します。負荷のパフォーマンスを分析するためにも使用できます。詳細
  • [監査] パネル。任意の URL に対して、一連の自動負荷テストとランタイム パフォーマンス テストを実行します。詳細

パフォーマンスの分析を初めて行う場合は、まず [監査] パネルを使用し、[パフォーマンス] パネルまたは [パフォーマンス] モニターを使用して詳細を調査することをおすすめします。

コンソールのサイドバー

大規模なサイトでは、関連性のないメッセージがコンソールにすぐにあふれてしまいます。新しいコンソール サイドバーを使用すると、不要な情報を減らし、重要なメッセージに集中できます。

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

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

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

関連する機能:

  • [フィルタ] テキスト ボックス。テキストを入力すると、そのテキストを含むメッセージのみが コンソールに表示されます。正規表現パターン、除外フィルタ、URL フィルタもサポートされています。

類似したコンソール メッセージをグループ化する

コンソールで、類似したメッセージがデフォルトでグループ化されるようになりました。たとえば、図 3 にはメッセージ [Violation] Avoid using document.write() のインスタンスが 27 個あります。

コンソールで類似したメッセージがグループ化される例

図 3. コンソールで類似したメッセージがグループ化される例

グループをクリックして展開すると、メッセージの各インスタンスが表示されます。

コンソール メッセージのグループを展開した例

図 4. コンソール メッセージの展開されたグループの例

この機能を無効にするには、[類似をグループ化] チェックボックスをオフにします。

関連する機能:

  • 独自の Console メッセージを console.group() でグループ化できます。

ローカル オーバーライド

この機能は当初 Chrome 64 でリリースされる予定でしたが、いくつかの粗さを解消するために期限近くに延期されました。新機能の UI が間に合わず更新されなかったようです。申し訳ありません。

この機能は Chrome 65 でリリースされます。Chrome 65 は Chrome 64 の約 6 週間後にリリースされます。詳しくは、ローカル オーバーライドをご覧ください。Windows または Mac をご利用の場合は、Chrome Canary をダウンロードして Chrome 65 を今すぐお試しいただけます。

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta のいずれかを使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。