DevTools の新機能（Chrome 67）

Kayce Basques

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

CSS のカラー プロパティ（background-color、color など）の値が CSS に設定されている場合 変数として定義すると、DevTools にその色のプレビューが表示されます。

CSS 変数の色の値の例。

図 4. 左側の古い UI では、 color: var(--main-color)。右側の新しい UI には、

取得としてコピー

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

上の動画では、setInterval() タイマーを介して時計を更新しています。[開始 無限ループは、停止しない do...while ループを実行します。次の時間に達しなかったため、間隔は再開されます Stop Current JavaScript Call 停止 が実行された場合に実行 選択済みです。

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

パフォーマンスの録画で、[カスタム速度] セクションをクリックすると [カスタム速度] が表示されます。 メジャーを [Summary]、[Bottom-Up]、[Call Tree]、[Event Log] の各タブで確認できます。

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

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

全般的に、[Main Thread]、[User Timing]、[GPU]、 ScriptStreamer など）を参照し、そのセクションのアクティビティをタブで確認できます。

[Memory] パネルで 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 つの値があります。左側 value は、JavaScript のために割り当てられたメモリを表します。右の値はすべての 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 の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

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