AI アシスタント
Chrome DevTools に直接統合された Gemini で、開発ワークフローを強化しましょう。スタイル、パフォーマンス、ネットワーク、ソースの AI アシスタンスにより、デバッグを効率化します。
スタイルのバグを修正する
スタイルに関する問題はデバッグが難しい場合があります。要素のスタイルについて詳しく説明を取得し、レイアウトとスタイルのバグを修正するサポートを取得する:
Can you center this element?
ネットワーク リクエストを分析する
リクエスト ヘッダーとレスポンス ヘッダーには、一目ではわかりにくい重要な情報が含まれていることがよくあります。AI アシスタンスを使用して、詳しく確認できます。
Why does this request fail?
ソースファイルについて
ウェブサイトのすべてのコードを自分で作成することはほとんどありません。特定のスクリプトが何に使用されているかわからない場合は、AI 支援は、次のような場合に役立ちます。
What is this file used for?
ページのパフォーマンスを調査する
Core Web Vitals が低い場合ウェブサイトの遅延の根本原因を特定するのは難しい場合があります。AI 支援は、問題を調査して解決策を提案します。
Help me optimize my LCP score
どこにいても AI アシスタントを利用できる
[AI に質問] ボタンを探して、現在のタスクについて Gemini に助けを求めます。
開始方法がわからない場合
DevTools の AI アシスタントのプロンプトのアイデアを確認する。デモをお試しいただくか、ご自身のウェブサイトでお試しください。
画像のアスペクト比を修正する
Make all teaser images always be 16:9
1 つの画像が他の画像と同じように切り抜かれていない。
- chrome.dev/cinemai/devtools/ ページを開き、DevTools を開きます。
- [動画で詳細を確認] セクションを見つけて選択します。
- AI アシスタント アイコンをクリックします。
- プロンプト:
Make all teaser images always be 16:9。 - [
Apply the suggested change] をクリックして続行します。 - ボタンは中央に配置する必要があります。
オーバーフローの問題を修正する
How can I make this element visible?
要素が表示されない
- chrome.dev/cinemai/devtools/ ページを開き、DevTools を開く。
- スキューバ ダイバーの img 要素を見つけます。
- AI アシスタント アイコンをクリックします。
- プロンプト:
How can I make this element visible without scrollbars?。 - [
Apply the suggested change] をクリックして続行します。 - ダイバーが画面に表示されているはずです。
ヘッダーをわかりやすくする
Are there any security headers present?
特定のリソースのセキュリティ ヘッダーの詳細を確認するには、次の操作を行います。
- chrome.dev/cinemai/devtools/ ページを開き、DevTools を開く。
- [ネットワーク] パネルで、
v4-chrome.dev.jsリクエストを選択します。 - AI アシスタント アイコンをクリックします。
- プロンプト:
Are there any security headers present? - LLM は、リソースのセキュリティに関連するヘッダーについて説明します。
詳細な調査
DevTools の AI アシスタンスを使用して、一般的なウェブ開発の問題を解決する方法について説明する動画をご覧ください。
Chrome 133 ～ 135 の AI チャット履歴の保持
Chrome 133 ～ 135 の AI チャット履歴の保持機能
DevTools 130 ～ 132 の新機能
Jecelyn、Oliver、Matthias が、Chrome 130 ～ 132 の AI アシスタントについて説明します
改善にご協力ください。
この機能は試験運用版であり、今後変更される可能性があります。生成される情報は不正確または不適切な場合がありますが、Google の見解を述べるものではありません。回答に投票して、改善にご協力ください。フィードバックをお寄せください。