CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。

5 Cool Things To Do with DevTools AI Assistance
AI assistance panel
AI assistance for styling
by Matthias Rohmer

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• はじめに
• デベロッパーツールでAIアシスタントを使用する前に
• AIアシスタントの起動方法
• AIアシスタントでレイアウトを理解する
• AIアシスタントによるペアプログラミング
• AIアシスタントによるアクセシビリティの検証・改善
• AIアシスタントでカラーのアドバイス
• AIアシスタントを実際に試してみる

はじめに

間もなくリリース予定のChrome 131のデベロッパーツールでは、AIアシスタントパネルが使用できるようになります。このAIアシスタントはCSSをデバッグするのに役立ちます。

ChromeでAIアシスタントを起動
※以下すべてChrome Canary 131のキャプチャ画像です。

この新機能によりWebページのレイアウトやアクセシビリティ、カラーの変更など、CSSの検証がより簡単になる5つの素晴らしい方法をこの記事で解説します。

デベロッパーツールでAIアシスタントを使用する前に

AIアシスタンスパネルを使用するには、以下の点を確認してください。

• 18歳以上で、サポートされている地域に居住している。
  ※日本（JP）はサポートされています。
• Chrome 131+を使用している。
• GoogleアカウントでChromeにログインしている。
• デベロッパーツールの「設定（Setting）」>「環境設定（Preferences）」>「外観（Appearance）」>「言語（Language）」で「英語（English(US)」を選択している。
• デベロッパーツールの「設定（Setting）」>「AI Innovations」で「AI assistance」をオンにしている。

これで、Chrome 131+でAIアシスタントを使用できるようになります。

AIアシスタントの起動方法

Chrome 131+でデベロッパーツールを開き、「設定」から「Show console drawer」を選択し、ドロワーを開いてAIアシスタントを起動します。

ドロワーを開いてAIアシスタントを起動

ElementsパネルからAIアシスタントを開くには、DOMノードを検証するときに右クリックして「Ask AI」を選択します。

ElementsパネルからAIアシスタントを起動

コマンドメニューから開くこともできます。
「設定」から「Run commnad」を選択し、「AI」と入力すると、ドロワーバッジが横にある「Show AI assistance」が表示されるので、コマンドを実行します。

コマンドメニューからAIアシスタントを起動

さらに、「設定」の「More tools」から「AI assistance」を選択してもAIアシスタントを起動できます。

AIアシスタントでレイアウトを理解する

Webサイトを実装するとき、常にゼロから始めるわけではありません。事前の知識がない既存のコードをベースに実装する必要があるときもあります。

そんな時は、AIアシスタントに要素のレイアウトについて質問し、最後のノードまでなぜそのように表示されるのか、また特定の要素にoverflow: hidden;が設定されているのかなど、理解することができます。

プロンプトには下記を使用します。

当ブログでAIアシスタントを試してみました。

当ブログでAIアシスタントを実行
レイアウトがアスキーアートで描かれました。

AIアシスタントによるペアプログラミング

CSSは本当にパワフルになりました。多くの可能性があるので、ときどき混乱しても大丈夫です。たとえば、そこに使用するのはjustify-itemsだっけ、それともjutify-self、もしくはalign-contentだっけ？

やりたいことは分かっているけど、CSSの適切なプロパティが何であるか分からないときがあります。そんな時はAIアシスタントは解決してくれます。

AIアシスタントは既存のコードを調べて、あなたが達成しようとしていることと比較し、必要な修正を提案して、レビュー・適用・コードベースのコピペをしてくれます。

当ブログでAIアシスタントを試してみました。

当ブログでAIアシスタントを実行

AIアシスタントによるアクセシビリティの検証・改善

Webサイトをアクセスしやすく、使いやすくすることは重要です。アクセシビリティについて後から考えるのではなく、実装の最初から考慮し、実装プロセス全体を通じてWebコンテンツアクセシビリティガイドラインに従うことを目指します。

AIアシスタントを使用して、<div>をよりセマンティックなHTML要素に置き換えたり、aria-*属性を追加したり、色のコントラストを改善するヒントなどを得ることができます。

プロンプトには下記を使用します。

当ブログでAIアシスタントを試してみました。

当ブログでAIアシスタントを実行

AIアシスタントでカラーのアドバイス

トレンドは移り変わるものです。グラデーション、シャドウ、シャープな境界線があり、フラットなデザインが続き、ダークな背景に明るいネオンカラーが使われる今日のデザインに移行しています。

Bootstrapのボタンのスタイル（バージョン1から5まで）

しかし、Web上のものがすべて同じに見えて疲れることはありませんか。そんなときには、AIアシスタントにお願いしてカラーを変更することもできます。

プロンプトには下記を使用します。

当ブログでAIアシスタントを試してみました。

当ブログでAIアシスタントを実行

CSSのコードも自動で書いてくれるのは楽だけど、デザインがちょっと。

AIアシスタントを実際に試してみる

AIアシスタントは、スタイルの問題を説明したり、それを修正する手助けをしたり、アクセシビリティのアドバイスをしたり、既存のスタイルを修正するなど、さまざまな手伝いをしてくれます。

さらに、AIアシスタントは飛行機の修理まで手伝ってくれます！
Chrome DevTools Hangarで実際に試してみてください。

Chrome DevTools Hangar
※このページではAIアシスタントを使用して、さまざまな要素を検証してスタイルのバグを修正する手順を楽しめます。