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

DevTools の新機能（Chrome 76）

Kayce Basques

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

CSS 値を使用したオートコンプリート

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

「bold」と入力すると、[Styles] ペインが「font-weight: bold」にオートコンプリートされます。

図 1. 「bold」と入力すると、[Styles] ペインが font-weight: bold にオートコンプリートされます。

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

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

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

ネットワーク設定

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

[Network Settings] のオプションは、[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 のインポートボタンとエクスポートボタン

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

新しい HAR ボタン。

図 4. 新しい HAR ボタン。

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

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

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

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

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

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

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

Service Worker 登録ポート番号

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

Service Worker ポート。

図 6. Service Worker ポート。

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

バックグラウンド取得イベントとバックグラウンド同期イベントを調べる

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

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

[Background Fetch] ペイン。

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

[Background Sync] ペイン。

図 8. [Background Sync] ペイン。

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

Firefox 用 Puppeteer

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

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

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

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

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

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。