DevTools の新機能（Chrome 143）

DevTools MCP サーバーの更新

DevTools MCP サーバーにさまざまな改善を加え、v0.11.0 をリリースしました。

  • MCP クライアント（Gemini CLI、Cursor など）でプロンプトを入力する際に、[要素] パネルと [ネットワーク] パネルで選択した要素とネットワーク リクエストを参照できるようになりました。
  • list_console_messages ツールに、[問題] パネルに表示される問題も含まれるようになりました
  • 新しい press_key ツールを使用して、フォーム要素に関連しないキーボード イベントをデバッグできるようになりました
  • ユーザー補助ツリーのスナップショットをディスクに保存できるようになりました
  • キャッシュを無視してページを再読み込みできるようになりました
  • 既存の Chrome プロファイルを使用するように --user-data-dir フラグを構成する

変更とバグの修正の完全なリストについては、GitHub の公開変更ログをご覧ください。DevTools MCP サーバーの詳細については、お知らせのブログ投稿をご覧ください。

トレースの共有を改善

[パフォーマンス] パネルのトレース共有ダイアログ

パフォーマンス トレースをエクスポートする際に、エクスポートされたファイルに追加のデータを含めることができるようになりました。これにより、将来の自分や同僚がデバッグを簡単に行えるようになります。次の項目を含めるかどうかを選択できるようになりました。

  • リソース コンテンツ: すべての HTML、CSS、JavaScript ファイルのコピー（拡張機能スクリプトを除く）
  • スクリプトのソースマップ: 作成元のコードへのマッピング。元の関数名とソースファイルを確認できます。

共有すべき情報と、非公開にしておくべき情報については、更新されたドキュメントをご覧ください。

この成果を達成し、初期の作業を主導してくださった Microsoft の同僚に感謝いたします。

@starting-style のサポート

[要素] パネルで、新しい CSS @starting-style ルールのデバッグがサポートされるようになりました。これは、エントリ アニメーションの作成に不可欠です。

これで、関連する要素の横の [Elements] ツリーに starting-style アドーナーが表示され、ピルをクリックして要素の starting-style 状態を切り替えたり、[Styles] タブで @starting-style ブロックを検査してデバッグしたりできるようになりました。

表示: masonry のエディタ ウィジェット

CSS Masonry レイアウトを試す場合、display でおなじみのエディタ ウィジェット（flex レイアウトと grid レイアウト）を使用して、masonry レイアウトのさまざまな配置オプションをすばやく切り替えることができるようになりました。

Lighthouse 13

Lighthouse パネルで Lighthouse 13 が実行されるようになりました。このマイルストーンにより、DevTools と Lighthouse でパフォーマンス分析情報を統合する作業が完了します。

詳しくは、お知らせのブログ投稿をご覧ください。Lighthouse の用途と、DevTools の [パフォーマンス] パネルとの関連性については、Lighthouse: ウェブサイトを最適化するをご覧ください。

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

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

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

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

DevTools の新機能

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