DevTools の新機能（Chrome 74）

Kayce Basques

ご利用の再開ありがとうございます。最新情報をご紹介します。

このページの動画バージョン

CSS プロパティの影響を受けるすべてのノードをハイライト表示します

ノードのボックスモデルに影響する CSS プロパティ（padding や margin など）にカーソルを合わせると、 その宣言の影響を受けるすべてのノードをハイライト表示します。

マージン プロパティにカーソルを合わせると、その宣言の影響を受けるすべてのノードがハイライト表示されます。

図 1. margin プロパティにカーソルを合わせると、そのプロパティによって影響を受けるすべてのノードのマージンがハイライト表示されます。 宣言

[Audits] パネルに表示される Lighthouse v4

新しいタップ ターゲットのサイズが適切でない監査では、 ボタンとリンクが、モバイル デバイスで適切な大きさと間隔を空けられていること。

レポートの PWA カテゴリでバッジ スコアリング システムが使用されるようになりました。

PWA 部門の新しいバッジ スコアリング システム

図 3. PWA 部門の新しいバッジ スコアリング システム

WebSocket バイナリ メッセージ ビューア

バイナリ WebSocket メッセージの内容を表示するには:

  1. [ネットワーク] パネルを開きます。分析の基本については、ネットワーク アクティビティの検査をご覧ください。 通信できます。

    [Network] パネル

    図 4. [Network] パネル

  2. [WS] をクリックして、WebSocket 接続以外のリソースをすべて除外します。

    [WS] をクリックすると、WebSocket 接続のみが表示される

    図 5. [WS] をクリックすると、WebSocket 接続のみが表示される

  3. WebSocket 接続の名前をクリックして調べます。

    WebSocket 接続の検査

    図 6. WebSocket 接続の検査

  4. [メッセージ] タブをクリックします。

    [メッセージ] タブ

    図 7. [メッセージ] タブ

  5. バイナリ メッセージ エントリのいずれかをクリックして調べます。

    バイナリ メッセージを検査する

    図 8. バイナリ メッセージを検査する

ビューアの下部にあるプルダウン メニューを使用して、メッセージを Base64 または UTF-8 に変換します。[ クリップボードにコピー クリップボードにコピー を実行して、 バイナリ メッセージをクリップボードにコピーします。

バイナリ メッセージを Base64 として表示する

図 9. バイナリ メッセージを Base64 として表示する

コマンド メニューで領域のスクリーンショットをキャプチャする

エリアのスクリーンショットを使用すると、ビューポートの一部のスクリーンショットをキャプチャできます。この機能は アクセスのワークフローは明らかになっていませんでした。エリアのスクリーンショットを アクセスできます。

  1. DevTools にフォーカスし、Ctrl+Shift+P キーを押すか Command+Shift+P キー（Mac）: コマンド メニューを開きます。

    コマンド メニュー

    図 10. コマンド メニュー

  2. 「area」と入力し、[キャプチャ領域のスクリーンショット] を選択して、Enter キーを押します。

  3. スクリーンショットを撮るビューポートのセクションにマウスをドラッグします。

    スクリーンショットを撮るビューポートの一部を選択する

    図 11. スクリーンショットを撮るビューポートの一部を選択する

[ネットワーク] パネルの Service Worker フィルタ

[ネットワーク] パネルのフィルタに「is:service-worker-initiated」または「is:service-worker-intercepted」と入力します。 次のユーザーによって発生したリクエスト（initiated）または変更された可能性のあるリクエスト（intercepted）を表示するテキスト ボックス 使用できます。

フィルタ条件: is:service-worker-initiative

図 12. 「is:service-worker-initiated」でフィルタ

is:service-worker-intercepted によるフィルタリング

図 13. 「is:service-worker-intercepted」でフィルタ

ネットワーク ログのフィルタリングの詳細については、リソースをフィルタするをご覧ください。

パフォーマンス パネルの更新

パフォーマンスの録画で、長いタスクと First Paint がマークアップされるようになりました。

[パフォーマンス] パネルを使用して分析する例については、メインスレッドの処理を減らすをご覧ください。 パフォーマンスが向上します

パフォーマンスの記録の時間のかかるタスク

パフォーマンスの録画に長いtasksが表示されるようになりました。

パフォーマンス録画で長いタスクにカーソルを合わせる

図 14. パフォーマンス録画で長いタスクにカーソルを合わせる

[タイミング] セクションの [First Paint]

パフォーマンス録音の [タイミング] セクションで [First Paint] とマークされるようになりました。

[タイミング] セクションの [First Paint]

図 15. [タイミング] セクションの [First Paint]

新しい DOM チュートリアル

DOM の表示と変更のスタートガイドで、DOM 関連の実践的なツアーを確認する。 説明します。

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

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

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

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

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

DevTools の新機能

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