このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 76）

Kayce Basques

こんにちは。Chrome 76 の Chrome DevTools の新機能を紹介します。

CSS 値による予測入力

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

「bold」と入力すると、[スタイル] ペインが「font-weight: bold」に予測入力されます。

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

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

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

[Network] パネルでは、DevTools ウィンドウが狭いと、スロットリングメニューなどのオプションにアクセスできないというユーザビリティの問題がありました。この問題を修正して [ネットワーク] パネルをすっきりさせるため、あまり使用されていないオプションがいくつか新しい [ネットワーク設定] ペインの背後に移動しました。

ネットワーク設定

図 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] ボタンを使用すると、ネットワークログを同僚とより簡単に共有できます。DevTools には、HAR のインポートとエクスポートが以前から存在していました。見つけやすいボタンが新たに変更されました。

新しい HAR ボタン。

図 4. 新しい HAR ボタン。

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

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

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

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

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

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

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

Service Worker の登録ポート番号

[Service Worker] ペインのタイトルにポート番号が追加され、デバッグする Service Worker を簡単に追跡できるようになりました。

Service Worker のポート。

図 6. Service Worker のポート。

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

バックグラウンドフェッチイベントとバックグラウンド同期イベントを調べる

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

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

[Background Fetch] ペイン

図 7. [Background Fetch] ペインデモ（Maxim Salnikov）

[Background Sync] ペイン

図 8. [Background Sync] ペイン

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

Firefox 用 Puppeteer

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

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

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

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

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