はじめに
Web開発者にとってお馴染みのChrome DevToolsに、
AIアシスタント機能が試験的に導入されました
個人的にはなんかAI機能が追加されたのか程度にしか思っていたのですが、
この機会に少し触ってみました
本記事では、この「AI Assistance」で何ができるのか、実際の使用感について紹介します
AI Assitanceの利用する要件はこちら
- 18 歳以上で、サポートされている地域に居住している。
- Chrome の最新バージョンを使用している。
- Google アカウントで Chrome にログインしている。
- 設定で [設定] > [設定] > [外観] > [言語] で [英語（米国）] が選択されている。
- DevTools で設定 [設定] > [AI イノベーション] を有効にしている。
まずはデモページで体験しよう
この機能がどのようなものか、まずは実際に触れてみるのが一番です
Googleが用意したデモページで、AI Assistanceの能力をすぐに試すことができます
- ドキュメント:
- デモページ:
AI Assistanceでできること
1. コンソールエラーをAIに直接質問
開発中に遭遇するエラーメッセージを、これまではメッセージをコピーしてGeminiやCursorなどの他クライアントから調査していまいた
コンソールに表示されたエラーや警告の横にあるアイコンをクリックするだけで、
その内容についてAI Assistanceに直接質問できます
現時点では以下の制約があるようです。
- 質問できるのは エラー または 警告 のみで、通常のログメッセージ (
console.logなど) は対象外です - 複数のログをまとめて解釈するような、前後の文脈を考慮した回答はまだ難しいようです（触ってみた個人的な感想です）
2. ネットワークエラーの解決もサポート
ネットワークパネルに表示されるネットワーク関連のエラーについても、AI Assistanceにその原因や解決策を尋ねることができます
リソースの読み込み失敗やAPI通信のエラーなど、ネットワークパネルでAI Assistanceに聞いてエラーの概要を持ってCursorやClaude Codeに尋ねると良さそうですね
3. CSSのレビューや改善提案も可能
Elementsパネルでは、選択したHTML要素のCSSについてAI Assistanceにアドバイスを求めることができます
スタイルの改善提案、特定のデザインについてレビューを依頼することも可能
例えば、以下のようにダイアログのデザインについてレビューを依頼したとします
プロンプト例:
What do you think of this design?
AIは、あなたが選択した要素の構造（セレクタ、親子関係など）を正確に理解した上で回答を生成します。
AIが理解した要素の構造:
* Its selector is `.el-dialog`
* It has 3 child element nodes: `header.el-dialog__header.show-close`, `div#el-id-8449-59`, `footer.el-dialog__footer`
* ...
AIからの回答（要約）:
As a CSS debugging assistant, I can't offer subjective opinions on whether a design is "good" or "bad"... However, I can comment on the technical aspects and common practices...
「良い/悪い」といった主観的な評価はせずに、構造の妥当性や一般的なベストプラクティスといった技術的な観点からコメントを返してくれます
入力に関する注意点
日本語入力の際、変換を確定するためにEnterキーを押すと、意図せずプロンプトが送信されてしまうことがあるため注意が必要（あるある）
モデル学習に使用されるか？
AI Assistanceはまだ試験運用段階であり、Googleは生成されたコードや情報について、各自の責任で使用するよう明記しています
また、データの取り扱いについても、「AI Assistanceに尋ねたデータはモデルの改善には使用されない」と記載されていますが、（恐らくチャットの場合はかな？）一方で別の規約ページでは 「品質向上のため、人間の審査担当者がレビューする場合がある」 との記載もあります
品質向上とサービス向上のため、上記の入力データ、生成された出力、関連機能の使用状況情報、およびお客様からのフィードバックは、人間の審査担当者によって読み取られ、注釈が付けられ、処理される場合があります。プロンプトやフィードバックには、お客様または他者を特定できる機密情報（機密情報など）や個人情報を含めないでください。
出典: https://developer.chrome.com/docs/devtools/console/understand-messages?s=1#data-use
当然のことではありますが、業務上の機密情報や個人を特定できるようなコードや情報は入力しないようにしましょう
さいごに
これは自分のことですが、これまでエラー内容をコピーし、別のAIツールに貼り付けてプロンプトを整形していました
ですが、エラーの概要などはAI Assistanceに聞いてそれを別AIツールに聞くという手順となり、よりAIの回答も正確になるのでは？と思っています
現時点では、コンソールの前後関係を読み取れないなどありますが、
今後のアップデートに期待
確かになと思った↓
参考資料
宣伝
自分が所属している会社についても紹介させてください 🙇♂️
弊社では物流課題解決や荷物を配送するドライバーの価値を向上させるために
「ピックゴー」 というサービスを運用しています
私が在籍している沖縄本店でもエンジニア募集中です！
気になる方は会社説明会も実施してますので気軽にお話聞きに来てくれたら嬉しいです😎