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

DevTools の新機能（Chrome 74）

Kayce Basques

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

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

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

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

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

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

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

新しいタップターゲットのサイズが適切でない監査では、ボタンやリンクなどのインタラクティブ要素が、モバイルデバイスで適切な大きさと間隔を空けられているかどうかをチェックします。

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

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

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

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

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

図 4. [Network] パネル
[WS] をクリックして、WebSocket 接続以外のリソースをすべて除外します。

図 5. [WS] をクリックすると、WebSocket 接続のみが表示される
WebSocket 接続の名前をクリックして調べます。

図 6. WebSocket 接続の検査
[メッセージ] タブをクリックします。

図 7. [メッセージ] タブ
バイナリメッセージ エントリのいずれかをクリックして調べます。

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

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

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

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

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

エリアのスクリーンショットを使用すると、ビューポートの一部のスクリーンショットをキャプチャできます。この機能には以前から存在していますが、アクセスのワークフローは明らかになっていました。エリアのスクリーンショットをコマンドメニューから利用できるようになりました

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

図 10. コマンドメニュー
「area」と入力し、[キャプチャ領域のスクリーンショット] を選択して、Enter キーを押します。
スクリーンショットを撮るビューポートのセクションにマウスをドラッグします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

図 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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。