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

DevTools の新機能（Chrome 64）

Kayce Basques

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

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

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

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

パフォーマンスモニター

Performance Monitor を使用すると、ページの読み込みや実行時のパフォーマンスのさまざまな側面をリアルタイムで確認できます。たとえば、次のことがわかります。

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. コンソールメッセージの展開グループの例

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

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

当初、この機能は 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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。