DevTools の新機能(Chrome 67)

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

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

[Network] パネルを開き、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-colorcolor などの 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. [View Trace] ボタン

無限ループを停止する

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

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

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

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

パフォーマンスの記録を表示しているときに [カスタム速度] セクションをクリックすると、[サマリー]、[ボトムアップ]、[コールツリー]、[イベントログ] の各タブにカスタム速度の測定値が表示されます。

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

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

通常は、いずれかのセクション(Main ThreadUser TimingGPUScriptStreamer など)を選択して、タブでそのセクションのアクティビティを表示できるようになりました。

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

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

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

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

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

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

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

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

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

ダークモードの更新

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

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

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

[セキュリティ] パネルでの Certificate Transparency(証明書の透明性)

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

[セキュリティ] パネルに表示された Certificate Transparency(証明書の透明性)情報。

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

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

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

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

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

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

Chrome CanaryDevBeta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

  • crbug.com からご提案やフィードバックをお送りください。
  • DevTools の問題を報告するには、DevTools でその他のオプション アイコン その他   > [ヘルプ] > [DevTools の問題を報告する] を選択します。
  • @ChromeDevTools にツイートします。
  • 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。

DevTools の新機能

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

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 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

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