Chrome 138 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

[パフォーマンス] パネルの改善

このバージョンでは、[パフォーマンス] パネルにいくつかの改善が加えられています。

「ネットワークの依存関係ツリー」インサイトの事前接続されたオリジン

[パフォーマンス] > [分析情報] > [ネットワーク依存関係ツリー] の分析情報に、使用済みまたは未使用の事前接続元と事前接続候補の一覧が表示されるようになりました。

事前接続のヒントを使用すると、サイトで重要な第三者ドメインへの接続を早期に確立し、ページの読み込み速度を改善できます。

「ネットワークの依存関係ツリー」分析情報に事前接続されたオリジンと候補を追加する前後の状態。

詳細については、必要なオリジンに事前接続するをご覧ください。

「ドキュメント リクエストのレイテンシ」分析情報のサーバー レスポンスとリダイレクトの時間

[パフォーマンス] > [分析情報] > [ドキュメント リクエストのレイテンシ] の分析情報に、サーバーの応答時間と、リダイレクトの数とリダイレクト時間（ある場合）が表示されるようになりました。

リダイレクトとサーバーのレスポンス時間を [ドキュメント リクエストのレイテンシ] 分析情報に追加する前後の状態。

ネットワーク リクエストの概要のリダイレクト

[パフォーマンス] パネルのネットワーク リクエストの [概要] とツールチップに、リダイレクト URL が表示されるようになりました。

ネットワーク リクエストの概要とツールチップにリダイレクト URL を追加する前後の状態。

Chromium の問題: 402353313。

パフォーマンス トレースのノイズが低減

パフォーマンス パネルに、v8 JavaScript エンジンの compile カテゴリのイベントが表示されなくなりました。以前は、これらのイベント、特に compile code イベントで、不要なオーバーヘッドとノイズが大量に発生していました。

パフォーマンス トレースから「コンパイル コード」イベントを削除する前後の状態。

重要なイベントが一部表示されなくなった場合は、crbug.com/414330508 にフィードバックをお寄せください。

「JavaScript のサンプルを無効にする」を非推奨に

[パフォーマンス] > [キャプチャ設定] の [JavaScript サンプルの無効化] オプションは、有用性が低く使用率も低いため、非推奨となり削除されました。

[キャプチャ設定] から [JavaScript サンプルの無効化] オプションを削除する前と後。

Chromium の問題: 414734883。

センサーの位置情報の精度パラメータ

[センサー] パネルで、位置情報エミュレーションの精度を設定できるようになりました。これにより、さまざまなレベルの GPS 精度を処理するテストを行うことができます。

[センサー] パネルで位置情報エミュレーションに [精度] パラメータを追加する前後の状態。

Chromium の問題: 40074843。

[要素] パネルの改善

このバージョンでは、[要素] パネルにいくつかの改善が加えられています。

複雑な CSS 値を簡単にデバッグ

複雑な CSS 値のデバッグを支援するため、[要素] > [スタイル] タブで、ホバー時にツールチップが表示されるようになりました。

  • 複数のリンクをクリックする必要がないように、CSS 変数の完全な定義チェーン。
  • 複雑な CSS 計算をステップごとに評価できるため、バグをより効率的に特定し、値の計算方法をより深く理解できます。

ツールチップには、定義ごとに 1 行で定義チェーンが表示されます。複雑な計算を展開したり、値にカーソルを合わせたりして、計算された値をハイライト表示し、その値を元の式までトレースできます。

定義チェーンと展開可能な複雑な計算を含むツールチップを追加する前と後。

Chromium の問題: 396080529。

[要素] > [スタイル] での @function のサポート

Chrome での @function のサポートに備えて、[要素] > [スタイル] タブで、カスタム関数名が専用セクションの定義にリンクされるようになりました。

カスタム関数名を対応するセクションにリンクする前後の状態。

ネットワーク パネルの改善

このバージョンでは、[ネットワーク] パネルにいくつかの改善が加えられています。

フィルタの数: has-request-header

[ネットワーク] パネルで、特定のリクエスト ヘッダー名でフィルタできる has-request-header フィルタがサポートされるようになりました。

[ネットワーク] パネルに「has-request-header」フィルタを追加する前後の状態。

Chromium の問題: 397481040。

独立したウェブアプリの Direct Sockets

[ネットワーク] パネルで、TCPSocket、UDPSocket（インバウンド モード）、UDPSocket（接続モード）を介した 分離されたウェブアプリ（IWA）のトラフィックをモニタリングできるようになりました。

これを行うには、テーブル内の通常のリクエストの横にある directscoket 接続を選択し、[メッセージ] タブでメッセージを選択します。

IWA の Direct Sockets のサポートを [ネットワーク] パネルに追加する前後の状態。

独立したウェブアプリ（IWA）は、ウェブ アプリケーションに高信頼のセキュリティ モデルを提供します。詳しくは、独立したウェブアプリを開始するをご覧ください。また、Direct Sockets API を実装したデモアプリもご確認ください。

その他のハイライト

このリリースにおける注目すべき修正と改善点は次のとおりです。

  • アプリケーション > ストレージ: 非推奨の Web SQL オプションを削除しました（crbug.com/412707590）。
  • 要素:
  • ネットワーク: Referrer-Policy HTTP ヘッダーはブラウザの動作を制御するレスポンス ヘッダーであり、クライアントサイドの指示ではないため、[フェッチとしてコピー] オプションから削除しました（crbug.com/413904896）。
  • パフォーマンス: ワーカー スレッドから「長時間実行タスク」の警告を削除しました。これは、ワーカー スレッドがメインスレッドをブロックしないためです（crbug.com/40248589）。
  • 問題。レポートの例:
    • ユーザーの追跡が疑われるリソースがブロックされているかどうか。
    • リダイレクト中にストレージにアクセスするかどうかに関係なく、バウンス トラッキング対策。
  • ユーザー補助機能。[要素] > [スタイル] の次の要素が、キーボードでフォーカス可能になりました。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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