DevTools の新機能（Chrome 76）

Kayce Basques
Kayce Basques
X GitHub

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

CSS 値のオートコンプリート

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

「bold」と入力すると、[スタイル] ペインで「font-weight: bold」が自動補完されます。

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

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

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

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

ネットワーク設定

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

[Use Large Request Rows]、[Group By Frame]、[Show Overview]、[Capture Screenshots] の各オプションは、[ネットワーク設定] に移動しました。図 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. Memory パネルの下部には、ページが合計 43.4 MB のメモリを使用していることが示されています。209 KB/秒は、合計メモリ使用量が 1 秒あたり 209 KB 増加していることを示します。

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

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

Service Worker 登録ポート番号

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

サービス ワーカーのポート。

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

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

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

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

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

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

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

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

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

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

Firefox 用 Puppeteer

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

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

Google I/O 2019 の Joel と Andrey による Puppeteer のトークをご覧ください。Puppeteer と Puppeteer for Firefox について詳しく説明しています。Firefox の発表は 4:05 頃に行われます。

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

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

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

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

DevTools の新機能

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