DevTools の新機能（Chrome 64）

Kayce Basques
Kayce Basques
X GitHub

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

以下をお読みになるか、以下のリリースノートの動画版をご覧ください。

パフォーマンス モニター

パフォーマンス モニタを使用すると、ページの読み込みやランタイム パフォーマンスのさまざまな側面をリアルタイムで確認できます。たとえば、次のような情報を確認できます。

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

アプリの動作が遅い、または不安定であるという報告がユーザーから寄せられた場合は、パフォーマンス モニターで手がかりを探します。

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

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

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

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

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

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

関連する機能:

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

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

コンソール サイドバー

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

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

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

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

関連する機能:

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

コンソールの類似するメッセージをまとめる

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

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

図 3. コンソールで類似するメッセージをグループ化する例

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

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

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

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

関連する機能:

  • console.group() を使用して、独自のコンソール メッセージをグループ化できます。

ローカルのオーバーライド

大変申し訳ございませんが、この機能はもともと Chrome 64 でリリースされる予定でしたが、いくつかの問題点を解消するため、リリース直前に延期されました。どうやら、新機能の UI が間に合わなかったようです。申し訳ありません。

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

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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