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

DevTools の新機能（Chrome 74）

Kayce Basques

ご利用の再開ありがとうございます。新機能は次のとおりです。

このページの動画版

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

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

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

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

[監査] パネルの Lighthouse v4

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

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

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

WebSocket バイナリメッセージ閲覧者

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

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

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

図 5. [WS] をクリックすると、WebSockety 接続のみが表示される
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-initiated によるフィルタリング

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

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

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

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

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

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

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

パフォーマンスの録画での長時間タスク

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

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

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

[Timings] セクションの [First Paint]

パフォーマンスレコーディングの [速度] セクションで First Paint をマークするようになりました。

[Timings] セクションの [First Paint]

図 15. [Timings] セクションの [First Paint]

新しい DOM チュートリアル

DOM 関連の機能のハンズオンツアーについては、DOM の表示と変更を開始するをご覧ください。

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

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

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

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

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