このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 64）

Kayce Basques

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

パフォーマンスモニター。ページのパフォーマンスをリアルタイムで確認できます。
コンソールサイドバー:コンソールのノイズが減り、重要なメッセージに集中できます。
類似するコンソールメッセージをグループ化する。コンソールではデフォルトで、類似したメッセージがグループ化されるようになりました。

このリリースノートを読むか、以下の動画版をご覧ください。

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

パフォーマンスモニター

パフォーマンスモニターを使用すると、ページの読み込みや実行時のパフォーマンスについて、次のようなさまざまな側面をリアルタイムで確認できます。

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

アプリの動作が遅い、動作がおかしいとユーザーが報告している場合は、パフォーマンスモニターで手がかりを探します。

読み込みパフォーマンスが重要な理由: BookMyShow は、スピードを重視したプログレッシブウェブアプリの開発により、コンバージョン数を 80% 増やすことに成功しました。詳細

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

コマンドメニューを開きます。
「Performance」と入力し、[Show Performance Monitor] を選択します。

図 1. パフォーマンスモニター
指標をクリックして、表示と非表示を切り替えます。図 1 に、CPU 使用率、JS ヒープサイズ、JS イベントリスナー数のグラフを示します。

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

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

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

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

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

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

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

[Group Similar] チェックボックスをオフにして、この機能を無効にします。

ローカルオーバーライド

当初、この機能は Chrome 64 でリリースされる予定でしたが、残念な部分を滑らかにするために、リリースに間近に迫っていました。どうやら、新機能の UI が時間内に更新されませんでした。申し訳ありません。

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

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

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

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。