DevTools の新機能（Chrome 67）

Kayce Basques

Chrome 67 の DevTools の新機能と主な変更点は次のとおりです。

リリースノートの動画バージョン:

[ネットワーク] パネルを開き、Command+F（Mac）または Ctrl+F（Windows、Linux、ChromeOS）を押して、新しい [ネットワーク検索] ペインを開きます。DevTools は、指定したクエリをすべてのネットワーク リクエストのヘッダーと本文で検索します。

新しい [ネットワーク検索] ペインでテキスト「cache-control」を検索している様子。

図 1. 新しい [ネットワーク検索] ペインで cache-control というテキストを検索する

[大文字と小文字を区別] 大文字と小文字を区別する をクリックして、クエリで大文字と小文字を区別します。[正規表現を使用] 正規表現を使用 をクリックして、指定したパターンに一致する結果を表示します。正規表現をスラッシュで囲う必要はありません。

[ネットワーク検索] ペインに表示される正規表現クエリ。

図 2. [ネットワーク検索] ペイン内の正規表現クエリ。

[グローバル検索] ペインの UI が、新しい [ネットワーク検索] ペインの UI と一致するようになりました。また、読みやすくするために結果をプリティ プリントするようになりました。

新旧の UI。

図 3. 左が古い UI、右が新しい UI

Command+Option+F（Mac）または Control+Shift+F（Windows、Linux、ChromeOS）を押してグローバル検索を開きます。コマンド メニューから開くこともできます。

[スタイル] ペインでの CSS 変数値のプレビュー

background-color や color などの CSS カラー プロパティの値が CSS 変数に設定されている場合、DevTools はその色のプレビューを表示するようになりました。

CSS 変数の色値の例。

図 4. 左側の古い UI では color: var(--main-color) の横にカラー プレビューが表示されていませんが、右側の新しい UI にはカラー プレビューが表示されています。

フェッチとしてコピー

ネットワーク リクエストを右クリックし、[コピー] > [フェッチとしてコピー] を選択して、そのリクエストの fetch() と同等のコードをクリップボードにコピーします。

リクエストの fetch() と同等のコードをコピーする。

図 5. リクエストの fetch() と同等のコードをコピーする

DevTools は次のようなコードを生成します。

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

監査パネルの更新

新しい監査

[監査] パネルに、次の 2 つの新しい監査が追加されました。

新しい構成オプション

これで、[監査] パネルを次のように構成できます。

  • パソコンのビューポートとユーザー エージェントの設定を保持します。つまり、[監査] パネルでモバイル デバイスをシミュレートできないようにします。
  • ネットワークと CPU スロットリングを無効にする。
  • 監査全体で LocalStorage や IndexedDB などのストレージを保持します。

新しい監査構成オプション。

図 6. 新しい監査構成オプション

トレースを表示

ページを監査したら、[トレースを表示] をクリックして、監査のベースとなる読み込みパフォーマンス データを [パフォーマンス] パネルに表示します。

[トレースを表示] ボタン。

図 7. [トレースを表示] ボタン

無限ループを停止

for ループ、do...while ループ、再帰を頻繁に使用している場合は、サイトの開発中に誤って無限ループを実行している可能性があります。無限ループを停止するには、次のようにします。

  1. [ソース] パネルを開きます。
  2. [一時停止] 一時停止 をクリックします。ボタンが [Resume Script Execution] 再開 に変わります。
  3. [スクリプトの実行を再開] 再開 を長押しして、[現在の JavaScript 呼び出しを停止] 停止 を選択します。

上の動画では、setInterval() タイマーを介して時計が更新されています。[無限ループを開始] をクリックすると、停止しない do...while ループが実行されます。[現在の JavaScript 呼び出しを停止] 停止 が選択されたときに実行されていなかったため、間隔が再開されます。

[パフォーマンス] タブの [ユーザーのタイミング]

Performance の録画を確認する際は、[ユーザー タイミング] セクションをクリックして、[概要]、[ボトムアップ]、[コールツリー]、[イベントログ] タブでユーザー タイミングの指標を確認します。

[Bottom-Up] タブでカスタム速度の測定結果を表示する

図 8. [ボトムアップ] タブでユーザー タイミングの指標を表示している。[ユーザー タイミング] セクションの左側にある青いバーは、このセクションが選択されていることを示しています。

一般に、任意のセクション（[Main Thread]、[User Timing]、[GPU]、[ScriptStreamer] など）を選択して、そのセクションのアクティビティをタブで表示できます。

[メモリ] パネルで JavaScript VM インスタンスを選択する

[メモリ] パネルに、ページに関連付けられているすべての JavaScript VM インスタンスが明確にリストされるようになりました。以前は、[ターゲット] プルダウン メニューの背後に隠されていました。

メモリパネルのスクリーンショット（前後）。

図 9. 左側の古い UI では、JavaScript VM インスタンスは [ターゲット] プルダウン メニューの背後に隠れていますが、右側の新しい UI では [JavaScript VM インスタンスの選択] テーブルに表示されます。

developers.google.com インスタンスの横には、8.7 MB と 13.3 MB の 2 つの値があります。左側の値は、JavaScript によって割り当てられたメモリを表します。右側の値は、その VM インスタンスによって割り振られているすべての OS メモリを表します。右側の値には左側の値も含まれます。Chrome のタスクマネージャーでは、左側の値は JavaScript Memory に対応し、右側の値は Memory Footprint に対応します。

[ネットワーク] タブの名前を [ページ] タブに変更

[ソース] パネルの [ネットワーク] タブが [ページ] タブに変更されました。

2 つの DevTools ウィンドウを並べて表示し、名前の変更を示しています。

図 10. 左側の古い UI では、ページのリソースを表示するタブは [ネットワーク] と呼ばれますが、右側の新しい UI では [ページ] と呼ばれます。

ダークモードの更新

Chrome 67 では、ダークモードのカラーパターンにいくつかの細かな変更が加えられています。たとえば、ブレークポイント アイコンと現在の実行行が緑色になります。

新しいブレークポイント アイコンと現在の実行カラーパターンのスクリーンショット。

図 11. 新しいブレークポイント アイコンと現在の実行ラインのカラーパターンのスクリーンショット

セキュリティ パネルの Certificate Transparency（証明書の透明性）

[セキュリティ] パネルに証明書の透明性に関する情報が表示されるようになります。

[セキュリティ] パネルの証明書の透明性情報。

図 12. [セキュリティ] パネルに表示される認証の透明性に関する情報

[パフォーマンス] パネルのサイト分離

サイト分離が有効になっている場合、[パフォーマンス] パネルに各プロセスの炎グラフが表示され、各プロセスが実行している合計作業を確認できるようになりました。

パフォーマンス レコーディングのプロセスごとのフレームグラフ。

図 13. パフォーマンス記録のプロセスごとのフレームチャート

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。