DevTools の新機能（Chrome 67）

Kayce Basques
Kayce Basques
X GitHub

Chrome 67 の DevTools には、次のような新機能と大きな変更が加えられています。

リリースノートの動画版:

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

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

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

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

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

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

[グローバル検索] ペインの UI が、新しい [ネットワーク検索] ペインの UI と一致するようになりました。また、スキャンしやすくするために、結果を整形して出力するようになりました。

新旧の UI。

図 3. 左が以前の UI、右が新しい UI

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

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

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

CSS 変数の色値の例。

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

フェッチとしてコピー

ネットワーク リクエストを右クリックして、[コピー] > [Fetch としてコピー] を選択すると、そのリクエストの 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. [一時停止]（一時停止）をクリックします。ボタンが [スクリプトの実行を再開] 再開 に変わります。
  3. [スクリプトの実行を再開] 再開 を長押しし、[現在の JavaScript 呼び出しを停止] 停止 を選択します。

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

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

パフォーマンスの記録を表示しているときに、[User Timing] セクションをクリックすると、[概要]、[ボトムアップ]、[コールツリー]、[イベントログ] の各タブで User Timing の測定値を確認できます。

[ボトムアップ] タブでカスタム速度の計測値を表示する。

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

一般に、セクション（メインスレッド、ユーザー タイミング、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 の新機能シリーズで取り上げられたすべての内容の一覧。