DevTools の新機能（Chrome 76）

Kayce Basques

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

CSS 値による自動入力

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

「太字」と入力すると、スタイルペインに「font-weight: bold」と自動的に入力されます。

図 1. bold と入力すると、スタイルペインに font-weight: bold が自動的に入力されます。

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

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

以前のネットワーク パネルには、DevTools ウィンドウが狭いときにスロットリング メニューなどのオプションにアクセスできないというユーザビリティの問題がありました。この問題を解決し、ネットワーク パネルの見づらさを解消するため、あまり使用されていないオプションを新しい [ネットワーク設定] [ネットワーク設定] ボタン ペインに移動しました。

ネットワーク設定

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

[大きなリクエスト行を使用する]、[フレームごとにグループ化]、[概要を表示]、[スクリーンショットをキャプチャ] のオプションは [ネットワーク設定] に移動しました。図 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 のインポートとエクスポートのボタン

新しい [すべてをコンテンツのある HAR としてエクスポート] エクスポート ボタンと [HAR ファイルをインポート] インポート ボタンを使用すると、ネットワーク ログを同僚と簡単に共有できます。HAR のインポートとエクスポートは、DevTools に長い間存在しています。ボタンが見つけやすくなったのは、今回の変更点です。

新しい HAR ボタン。

図 4. 新しい HAR ボタン。

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

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

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

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

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

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

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

Service Worker 登録ポート番号

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

Service Worker ポート。

図 6. Service Worker ポート。

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

バックグラウンド取得とバックグラウンド同期のイベントを検査する

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

[アプリケーション] パネルに移動し、[バックグラウンド取得] または [バックグラウンド同期] タブを開き、[記録] 記録 をクリックしてイベントのロギングを開始します。イベントをクリックすると、その詳細が表示されます。

[バックグラウンド フェッチ] ペイン。

図 7. [バックグラウンド フェッチ] ペイン。Maxim Salnikov によるデモ。

[バックグラウンド同期] ペイン。

図 8. [バックグラウンド同期] ペイン。

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

Firefox 用 Puppeteer

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 分 5 秒頃に表示されます。

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。