DevTools の新機能（Chrome 140）

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini でより多くの分析情報をデバッグする

[パフォーマンス] > [分析情報] で、[AI でデバッグ]（以前の [AI に質問]）をクリックして、[AI アシスタンス] パネルで Gemini とチャットしてデバッグできるようになりました。

  • 画像配信を改善する
  • 従来の JavaScript
  • 重複する JavaScript
  • 最新の HTTP

「AI でデバッグ」ボタンがパフォーマンス分析情報に追加される前後の様子。

[ネットワーク条件] で「Save-Data」ヘッダーをエミュレートする

[ネットワーク条件] パネルで、Save-Data リクエスト ヘッダーの動作をエミュレートできるようになりました。このヘッダーは、データ使用量の削減に対するクライアントの優先度を示すネットワーク クライアント ヒントです。navigator.connection.saveData API を介して利用することもできます。

[ネットワーク条件] に [Save-Data] リクエスト ヘッダー エミュレーションを追加する前後の状態。

Chromium の問題: 40668980。

CSS プロパティのツールチップでベースラインのステータスを確認する

[要素] > [スタイル] で、任意の CSS プロパティにカーソルを合わせると、プロパティの定義の下に、Baseline ステータスに基づく主要なブラウザでの利用可能性が表示されるようになりました。

CSS プロパティのツールチップに Baseline ステータスを追加する前と後。

Chromium の問題: 417749762。

ユーザー エージェント クライアントのヒントでフォーム ファクタをオーバーライドする

[ネットワーク状態] > [ユーザー エージェント クライアント ヒント] プルダウンで、フォーム ファクタ、具体的には Sec-CH-UA-Form-Factors リクエスト ヘッダーの値をオーバーライドするオプションが利用できるようになりました。

フォーム ファクタのオーバーライドのオプションをユーザー エージェント クライアント ヒントに追加する前後の状態。

Chromium の問題: 422218341。

Lighthouse 12.8.0

Lighthouse パネルで Lighthouse 12.8.0 が実行されるようになりました。

このバージョンでは、Lighthouse に「Trusted Types を使用して DOM ベースの XSS に対処する」という新しいレポートが追加されています。

変更点の完全なリストもご覧ください。

DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 40543651。

その他のハイライト

このリリースにおける主な修正と改善点は次のとおりです。

  • AI アシスタンス:
    • [設定] で対応する AI 機能を無効にすると、チャット履歴が消去されるようになりました。
    • ユーザー補助: 回答のストリーミングが開始されたときに「回答を読み込んでいます」、回答が完了したときに「回答の準備が完了しました」と、コンテキスト タイトルを早めに読み上げるようになりました。
  • 要素:
    • [スタイル] タブで、sibling-index()、sibling-count()、env() の CSS 関数を評価できるようになりました（crbug.com/417128001、crbug.com/40196710）。
    • ::view-transition-group-children 疑似要素のサポートを追加しました（crbug.com/425901164）。
    • <summary> 要素のインタラクティブなコンテンツに関するユーザー補助の問題のサポートを追加しました（crbug.com/427172874）。
    • [計算済み] タブから、[スタイル] のロングハンド プロパティに移動できるようになりました（crbug.com/41486012）。
    • イージング エディタとカラー エディタ: キーボードを使用して、アニメーションのトランジション用のベジェ曲線見本とカラー見本を操作できるようになりました（crbug.com/401213421）。
  • ネットワーク: HAR ファイルのインポートに、リクエストとレスポンスの Cookie も含まれるようになりました（crbug.com/432995868）。
  • デバイスモード: Apple デバイスのユーザー エージェントを最新の Safari 18.5 に更新しました。

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

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

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

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

DevTools の新機能

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