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 計算を段階的に評価できるため、バグをより効率的に特定し、値の計算方法を詳しく把握できます。

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

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

Chromium の問題: 396080529。

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

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

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

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

このバージョンでは、[ネットワーク] パネルが改善されています。

has-request-header 個のフィルタ

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

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

Chromium の問題: 397481040。

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

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

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

IWA でのダイレクト ソケットのサポートをネットワーク パネルに追加する前と後。

独立したウェブアプリ（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 の新機能シリーズで取り上げられたすべての内容のリスト。