DevTools の新機能（Chrome 67）

Kayce Basques
Kayce Basques
X GitHub

Chrome 67 の DevTools に追加される新機能と主な変更点は次のとおりです。

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

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

新しい [Network Search] ペインで「cache-control」というテキストを検索している。

図 1. 新しい [Network Search] ペインでテキスト cache-control を検索

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

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

図 2. [Network Search] ペインの正規表現クエリ。

[グローバル検索] ペインの UI が、新しい [ネットワーク検索] ペインの 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 としてコピー

ネットワーク リクエストを右クリックし、[Copy] > [Copy As 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"
});

[Audits] パネルの更新

新しい監査

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

新しい構成オプション

[Audits] パネルを構成して、次のことができるようになりました。

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

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

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

トレースを表示

ページを監査した後、[View Trace] をクリックすると、監査のベースとなった読み込みパフォーマンス データが [Performance] パネルに表示されます。

[View Trace] ボタン。

図 7. [View Trace] ボタン

無限ループの停止

for ループ、do...while ループ、再帰を頻繁に使用している場合、サイトの開発中に誤って無限ループを実行したことがあるかもしれません。無限ループを停止するには、次の操作を行います。

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

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

[パフォーマンス] タブでの [カスタム速度] の表示

パフォーマンスの記録を表示しているときに、[User Timing] セクションをクリックすると、[Summary]、[Bottom-Up]、[Call Tree]、[Event Log] タブにカスタム速度の測定値が表示されます。

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

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

一般に、任意のセクション（Main Thread、カスタム速度、GPU、ScriptStreamer など）を選択して、そのセクションのアクティビティをタブで表示できるようになりました。

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

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

[Memory] パネルのスクリーンショット（変更前と変更後）。

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

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

[Network] タブを [Page] タブに名称変更

[Sources] パネルの [Network] タブが [Page] タブに名称変更されました。

2 つの DevTools ウィンドウが並んで表示され、名前の変更を示しています。

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

ダークモードの更新

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

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

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

[Security] パネルの Certificate Transparency

[Security] パネルに証明書の透明性に関する情報が表示されるようになりました。

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

図 12. [セキュリティ] パネルの Certificate Transparency（証明書の透明性）に関する情報

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

サイト分離を有効にしている場合、[Performance] パネルに各プロセスのフレーム チャートが表示されるようになり、各プロセスが引き起こしている作業の合計を確認できるようになりました。

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

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

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての機能の一覧。