DevTools の新機能（Chrome 139）

Sofia Emelianova
Sofia Emelianova
GitHub

信頼性と生産性が向上した Chrome DevTools

このバージョンでは、Chrome DevTools はプロダクトの卓越性を優先しました。これには、長年の視覚的な不具合、使いやすさに関する懸念、デザインの不整合から、パフォーマンスや機能に関する問題まで、さまざまな既知の問題に対処することが含まれます。全体として、未解決の問題の数が 27% 減少しました。

長年放置されていた問題に対処したほか、[パフォーマンス] パネルや AI アシスタンスなど、新しい機能の改善も行いました。その結果、開発者エクスペリエンスが全体的に大幅に向上します。

舞台裏では、テスト カバレッジの強化、複雑なテストの失敗の調査、テストのより堅牢な基盤への移行、その過程で発見されたバグの解決に多大な労力を費やしました。テスト関連の問題の数を 54% 削減できました。

さまざまなパネルで多数の微調整が行われたことで、日々のデバッグや開発のワークフローがよりスムーズで信頼性が高く、生産性の高いものになることを願っています。

スタイリング用の AI アシスタントで画像をアップロードする

プロンプトに視覚的なコンテキストを追加するため、自動的にスクリーンショットを撮るだけでなく、[AI アシスタンス] パネルで Gemini とのチャットに任意の画像をアップロードできるようになりました。

要素パネルで DOM 要素を選択して [AI に質問] をクリックすると、会話が開始され、要素が会話コンテキストとして指定されます。入力フィールドの [画像を追加] をクリックします。

任意の画像アップロードをサポートする前後の状態。

ネットワークのテーブルにリクエスト ヘッダーを追加する

[ネットワーク] パネルで、リクエスト テーブルの列名を右クリックして複数のリクエスト ヘッダーを選択し、列として追加できるようになりました。

メニューに [リクエスト ヘッダー] オプションを追加する前後の様子。

Chromium の問題: 397481040。

Google I/O 2025 のハイライトをご覧ください

まだお試しでない場合は、Google I/O 2025 で紹介された Chrome DevTools の新機能をお試しください。以下はその一部です。

また、新しいパフォーマンス分析情報（重複する JavaScript、古い JavaScript）もご確認ください。

その他のハイライト

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

  • アプリケーション: IndexedDB オブジェクト ストアをクリアする確認ダイアログが追加されました。これは不可逆的なアクションであるためです（crbug.com/326987147）。
  • ソース: コード行の横にあるログポイントと条件付きブレークポイントのバッジに、対応するログメッセージまたは条件を含むツールチップが表示されるようになりました（crbug.com/40266230）。

  • パフォーマンス:

    • [レイアウト シフトの原因] の分析情報に、サイズが指定されていない画像へのリンクが表示されるようになりました（crbug.com/416449602）。
    • LCP リクエストの検出に関する分析情報に、最も早い開始点から画像が読み込まれるまでの遅延時間が表示されるようになりました。
    • スロットリング: 一部のユーザーがローカルに保存していたスロットリング設定の古い形式を修正しました。
    • イベントログ: フィルタリングの速度が向上しました（crbug.com/40783421）。

  • アニメーション: アニメーション グループをクリックしてプレビューすると、同様のより優れたエクスペリエンスが得られるため、プレビューのスクリーンショットを非推奨にしました（crbug.com/330179643）。

  • ユーザー補助:

    • [ソース] > [DOM ブレークポイント] サイドバーが存在する場合、aria-label を追加しました。
    • コンソールの [ライブ式] テキスト フィールド内での Shift+Tab キーボード ナビゲーションを修正しました（crbug.com/408398435、crbug.com/420344137）。
    • 設定で、ズームイン/アウト/リセットのショートカット（Cmd/Ctrl + +/-/0）がサポートされるようになりました（crbug.com/41484555）。
    • [要素] > [スタイル]: CSS のヒントと警告のアイコン（crbug.com/40706851）と角度の時計がキーボード フォーカス可能になりました（crbug.com/401212624、crbug.com/401213524）。

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

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

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

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

DevTools の新機能

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