Chrome 142⁠DevToolsのAIアシスタンス機能を強化 —⁠—コード提案機能の追加や⁠トレース情報を渡すだけでパフォーマンス調査が可能に

Chrome 142が10月28日にリリースされた。今回のリリースでDevTools上でAIアシスタンス(AI assistance)を簡単に開けるようになり、コード提案機能の追加や、トレース情報を渡すだけでパフォーマンス調査が簡単におこなえるようになった。

改善された主な事柄を紹介する。

DevToolsの上部メニュー右上に、AIアシスタンスを開く青いボタンを追加した。これまでは詳細メニューから「Debuging with AI (Ask AI)」を選択する必要があった。

そして、このドロワー(AIアシスタンス)の向きを横置きできるようになり、各パネルと左右に並べて表示できるようになった。

AIアシスタンスを開くためのボタンが付いたDevTools

また、右クリックからコンテキストメニューで「Debuging with AI」を選択する際に、要素ごとのコンテキストメニューが提供されるようになっている。

Elementsパネルで要素を右クリックして「Debuging with AI」を選ぶと、その要素に関する質問の候補が表示される。確定すると回答が表示される

なお、AIアシスタンスを利用するには、AIアシスタンスの設定などからDevToolsの設定のAI innovationsの画面を開き、各項目(⁠⁠コンソールインサイト」⁠AIアシスタンス」⁠自動アノテーション」⁠コード提案⁠⁠)を有効にする必要がある。これらの機能を使うためには、DevToolsの言語設定を「英語」にする必要がある(設定(Preferences⁠⁠→デザイン(Appearance⁠⁠→言語(Languages⁠⁠。

DevToolsのAI innovations設定画面。Chrome 142で「Code suggestions(コード提案)」が追加された

今回、Chrome 142では、SourcesパネルとConsoleパネルで先読みでコード提案をしてくれる機能が利用可能になった。

Consoleパネルでのコードの自動補完
Sourcesパネルでのコードの自動補完

Preferenceパネルではトレースを記録した後にAIアシスタンスを開くと、特定のコンテキストを選択する必要なく、トレース全体、関連するパフォーマンスに関する洞察、さらには接続されたフィールドデータについて相談できるようになった。

トーレスを記録してからAIアシスタンスを開くと、自動で質問の候補が表示される。なお、チャットにトレース情報が添付されているのが見て取れる(よって直接質問することもできる)
質問の候補を選ぶとチャット欄に入力されるので、そのまま入力を確定すれば回答を得られる

このほか、Googleデベロッパープログラムが統合されて設定のアカウントに表示されるようになったほか、Applicationパネルでのワーカータイプすべてのストレージ検査対応、Stylesパネルでの:target-currentの表示対応、NetworkパネルでのIs ad-relatedブール値に基づいたリクエストフィルタに対応した。

DevTools MCPサーバーもパブリックプレビューを9月に公開した以降も改善が進み、10月22日にはv0.9.0をリリースしていることを報告している。

それまでに改善された主な事柄は以下のとおり。

  • Node.js 20.19.0以上をサポートした(公開当初はNode.js 22.12.0以上だった⁠⁠。
  • ネットワークリクエストおよびコンソールメッセージにページネーションを導入してトークンを節約し、用途別に抽出するためのフィルター(リクエスト種別:scripts/stylesheets/images、メッセージ種別:log/warning/error)に対応した。
  • スクリーンショットの出力先のパスとフォーマットを指定可能になった。
  • ツールカテゴリを使うことで、エージェント側に渡すデータを整理できるようにして不要なノイズを減らせるようにした。
  • MCPサーバーが使用するChromeインスタンスに起動時の引数を渡せるようになった。

おすすめ記事

記事・ニュース一覧