DevTools の新機能（Chrome 74）

Kayce Basques

ご利用の再開ありがとうございます。新しくなった点は次のとおりです。

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

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

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

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

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

Audits パネルの Lighthouse v4

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

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

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

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

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

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

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

    [ネットワーク] パネル

    図 4. [ネットワーク] パネル

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

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

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

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

    WebSocket 接続の検査

    図 6. WebSocket 接続の検査

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

    [メッセージ] タブ

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

  5. [Binary Message] エントリのいずれかをクリックして検査します。

    バイナリ メッセージの検査

    図 8. バイナリ メッセージの検査

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

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

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

コマンド メニューの領域のスクリーンショット

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

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

    コマンド メニュー

    図 10. コマンド メニュー

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

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

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

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

ネットワーク パネルのサービス ワーカー フィルタ

[Network] パネルのフィルタ テキスト ボックスに「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. パフォーマンス レコーディングで長時間のタスクにカーソルを合わせる

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

パフォーマンス レコーディングのタイミング セクションに、First Paint が表示されるようになりました。

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

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

新しい DOM チュートリアル

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

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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