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

[Network] パネルでは、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 が開いている間に DevTools がバックグラウンド取得イベントとバックグラウンド同期イベントのみを記録すると、あまり役に立ちません。そのため、録画を開始すると、タブを閉じた後や Chrome を閉じた後も、バックグラウンド フェッチ イベントとバックグラウンド同期イベントが引き続き記録されます。

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

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

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

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

図 8. [Background Sync] ペイン

これらの新機能に関するフィードバックは、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:05 頃に行われます。

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

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

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

以下のオプションを使用して、新機能、アップデート、DevTools に関連するその他の内容について話し合います。

DevTools の新機能

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