DevTools の新機能（Chrome 67）

Kayce Basques

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

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

[ネットワーク] パネルを開き、Command+F（Mac）または Ctrl+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 にはカラー プレビューが表示されています。

取得としてコピー

ネットワーク リクエストを右クリックして [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] パネルには、次の 2 つの新しい監査が表示されます。

新しい構成オプション

[Audits] パネルで以下の構成を行えるようになりました。

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

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

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

トレースを表示

ページの監査後、[トレースを表示] をクリックすると、監査のベースとなる負荷パフォーマンス データが [パフォーマンス] パネルに表示されます。

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

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

無限ループを停止

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

  1. [ソース] パネルを開きます。
  2. [一時停止] 一時停止 をクリックします。ボタンが [Resume Script Execution] 再開 に変わります。
  3. [Resume Script Execution] 再開 を押したまま [Stop Current JavaScript Call] 停止 を選択します。

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

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

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

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

図 8. [Bottom-Up] タブでカスタム速度の測定結果を表示する。[カスタム速度] セクションの左側にある青色のバーは、このモードが選択されていることを示します。

通常は、任意のセクション（Main Thread、User Timing、GPU、ScriptStreamer など）を選択して、そのセクションのアクティビティを表示できるようになりました。

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

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

[Memory] パネルの使用前と使用後のスクリーンショット。

図 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（証明書の透明性）

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

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

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

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

サイト分離が有効になっている場合、[パフォーマンス] パネルに各プロセスのフレームグラフが表示されるため、各プロセスが原因となっている作業の総計を確認できます。

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

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

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。

DevTools の新機能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 入門ガイド

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59