Chrome DevTools に搭載されたAI アシスタント パネルであそぶ
Chrome DevTools をよく利用している人は Console パネルの右部分に「ai assistance」というタブがあるのに気づいたかもしれない。これは DevTools にて利用することができる AI ツールだ。Chrome Canary 131 以降で利用できる。
AI アシスタント パネルについては、以下の公式ページが詳しい。
とりあえず、何ができるかについて公式ページを引用してみる。
AI アシスタント パネルを使用すると、DevTools で直接 Gemini とチャットできます。このパネルから開始した会話には、検査しているページの技術的な詳細に関するコンテキストが自動的に含まれます。
[AI アシスタント] パネルを使用する場合は、提供されたサンプル プロンプトまたは独自の質問を会話の出発点として使用し、タスクを解決するために必要な数のフォローアップ質問を続けます。
既にレンダリングしているページのコンテキストを持っているという点は素晴らしい。いちいちコードをコピペして聞かなくていいというわけだ。AI 支援パネルを使用する条件としては以下が挙げられている。
- 18 歳以上で、サポートされている地域に居住している
- Chrome の最新バージョンを使用していること。
- Google アカウントで Chrome にログインしていること。
- 設定で [設定] > [設定] > [外観] > [言語] で [英語（米国）] が選択されている。
- DevTools で設定 [設定] > [AI イノベーション] を有効にしている。
ふむふむなるほど。では、早速使ってみよう。
とりあえず、このサイトのトップページに移動し、画面上にあるテキストのクラスを取得してみる。「Current Tech Spotlight」というテキストにアクセスしてみよう。セレクタとかを書かず、自然言語で聞けるのが素晴らしい。
AI 的には h2 と認識されて、そのクラスを取得することができた。画面にある情報を取得するだけでなく、画面の情報を変更してもらうなんてこともできる。「Current Tech Spotlight」を「Today's Special」にしてくださいとお願いするとどうなるか。
どういうことを実行するかというコードサンプルがまずは出力された。一瞬である。これで OK なら「Continue」ボタンを押そう。
すると、トップページのテキストが変更された。
コーディング中、REPL 的にいろいろな調整をしていってもいいかもしれないし、レンダリング後のコンテキストに依存した質問なんかをしてみてもいいかもしれない。ブラウジング中にどんどん質問できるから技術解析にも使えそうだ。
試しにこのサイトでどんなフレームワークを使っているか AI に聞いてみる。このサイトは Next.js を使っているものの、export して使っているので実質的には単なる静的な HTML である。どの程度推測するだろう？
Based on the presence of _next/static/chunks in the script URLs, it's highly likely that this site is using Next.js. The class names on the body element, such as font-sans, c-yhfe-bg-default, and bg-white, seem to be utility classes, which are often used in conjunction with frameworks like Tailwind CSS. Therefore, it's likely that the site uses Next.js with Tailwind CSS.
コード内の URL やクラス名から Next.js であること、Tailwind CSS を利用していることが推測された。すごいな。
