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 変数値のプレビュー

CSS カラー プロパティ（background-color や color など）の値が 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"
});

監査パネルの更新

新しい監査

[Audits] パネルに、次の 2 つの新しい監査が表示されます。

新しい構成オプション

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

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

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

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

トレースを表示

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

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

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

無限ループを停止する

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

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

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

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

Performance Recording で、[User Timing] セクションをクリックすると、[Summary]、[Bottom-Up]、[Call Tree]、[Event Log] の各タブに [User Timing] の測定値が表示されます。

[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 の新機能シリーズで取り上げられたすべての内容のリスト。