DevTools の新機能（Chrome 76）

Kayce Basques

こんにちは。Chrome 76 の Chrome DevTools の新機能は次のとおりです。

CSS 値の予測入力

DOM ノードにスタイル宣言を追加するときに、宣言名よりも宣言値の方が覚えやすい場合があります。たとえば、<p> ノードを太字にする場合、font-weight という名前よりも bold という値の方が覚えやすいかもしれません。[Style] ペインの予測入力 UI で CSS 値がサポートされるようになりました。必要なキーワード値は覚えているが、プロパティ名を思い出せない場合は、値を入力してみてください。予測入力により、目的の名前を見つけることができます。

図 1. 「bold」と入力すると、[Styles] ペインで「font-weight: bold」に予測入力されます。

この新機能に関するフィードバックは、Chromium の問題 #931145 までお送りください。

ネットワーク設定の新しい UI

以前のネットワーク パネルには、DevTools ウィンドウが狭い場合にスロットリング メニューなどのオプションにアクセスできないというユーザビリティの問題がありました。この問題を解決し、[Network] パネルを整理するために、あまり使用されないいくつかのオプションが新しい [Network Settings] ペインに移動されました。

図 2. ネットワーク設定] の順にタップします。

[Use Large Request Rows]、[Group By Frame]、[Show Overview]、[Capture Screenshots] のオプションが [Network Settings] に移動しました。図 3 は、古い場所と新しい場所のマッピングを示しています。

図 3. 古い場所を新しい場所にマッピングする。

この UI の変更に関するフィードバックは、Chromium の問題 #892969 に送信してください。

HAR エクスポートの WebSocket メッセージ

ネットワーク パネルから HAR ファイルをエクスポートして同僚とネットワーク ログを共有する際に、HAR ファイルに WebSocket メッセージが含まれるようになりました。_webSocketMessages プロパティは、カスタム フィールドであることを示すアンダースコアで始まります。

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

この新機能に関するフィードバックは、Chromium の問題 #496006 までお送りください。

HAR のインポート ボタンとエクスポート ボタン

新しい [Export All As HAR With Content] ボタンと [Import HAR File] ボタンを使用すると、ネットワーク ログを同僚と簡単に共有できます。HAR のインポートとエクスポートは、以前から DevTools に存在していました。ボタンが見つけやすくなったことが新しい変更点です。

図 4. 新しい HAR ボタン。

この UI の変更に関するフィードバックは、Chromium の問題 #904585 までお送りください。

リアルタイムの合計メモリ使用量

[Memory] パネルに、合計メモリ使用量がリアルタイムで表示されるようになりました。

図 5. [Memory] パネルの下部には、ページが合計 43.4 MB のメモリを使用していることが示されています。209 KB/s は、合計メモリ使用量が 1 秒あたり 209 KB 増加していることを示します。

メモリ使用量をリアルタイムで追跡するパフォーマンス モニターもご覧ください。

この新機能に関するフィードバックは、Chromium の問題 #958177 までお送りください。

Service Worker 登録ポート番号

[Service Workers] ペインのタイトルにポート番号が含まれるようになり、デバッグ中のサービス ワーカーを簡単に追跡できるようになりました。

図 6. サービス ワーカー ポート。

この UI の変更に関するフィードバックは、Chromium の問題 #601286 に送信してください。

バックグラウンド フェッチとバックグラウンド同期のイベントの検査

[Application] パネルの新しい [バックグラウンド サービス] セクションを使用して、バックグラウンド フェッチ イベントとバックグラウンド同期 イベントをモニタリングします。バックグラウンド フェッチとバックグラウンド同期のイベントは、バックグラウンドで発生するため、DevTools が開いているときにのみバックグラウンド フェッチとバックグラウンド同期のイベントが記録されるのでは、あまり役に立ちません。そのため、記録を開始すると、タブを閉じても、Chrome を閉じても、Background Fetch イベントと Background Sync イベントは引き続き記録されます。

[Application] パネルに移動し、[Background Fetch] タブまたは [Background Sync] タブを開いて、[Record] をクリックしてイベントのロギングを開始します。イベントをクリックすると、詳細が表示されます。

図 7. [Background Fetch] ペイン。Maxim Salnikov 氏によるデモ。

図 8. [Background Sync] ペイン。

これらの新機能に関するフィードバックは、Chromium の問題 #927726 までお送りください。

Puppeteer for Firefox

Puppeteer for Firefox は、Puppeteer API を使用して Firefox を自動化できる新しい試験運用版プロジェクトです。つまり、以下の動画で示すように、同じ Node API を使用して Firefox と Chromium を自動化できるようになりました。

node example.js を実行すると、Firefox が開き、Puppeteer のドキュメント サイトの検索ボックスにテキスト page が挿入されます。次に、Chromium で同じタスクを繰り返します。

Puppeteer と Puppeteer for Firefox の詳細については、Google I/O 2019 での Joel と Andrey による Puppeteer の講演をご覧ください。Firefox の発表は 4:05 頃です。

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

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

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

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

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools のその他 more_vert > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告してください。
• @ChromeDevTools をメンションしてツイートしてください。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残す。

DevTools の新機能

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