Chrome DevTools の AI アシスタンスのユースケースを確認し、スタイル設定やパフォーマンスなど、さまざまなデバッグ ワークフローをサポートする方法を確認します。

ドキュメントを読む

スタイリング用

要素のレイアウトとその変更方法について、次のようなプロンプトで詳細な説明を取得します。

How is this element laid out?

フレックスアイテムですか？絶対位置に設定されていますか？グリッドの一部ですか？AI アシスタントは、要素ツリーのレイアウトを要約し、変更方法を示すコードサンプルを提供できます。

アニメーションが機能しない場合は、アニメーション要素について AI アシスタントに尋ねます。

Why is my animation not working?

AI アシスタントは、関連する CSS プロパティやイベント リスナーなどをチェックし、問題の原因を特定して、修正するためのコード例を提供します。

デモ

スタイル設定の AI アシスタントをテストするプロジェクトがない場合は、DevTools Hangar で試す

長方形のホイール、故障したポジション ライト、煙を上げるエンジンを修理して、DevTools 飛行機を再び飛ばすための適切なプロンプトを見つけましょう。

デモを試す

…（ネットワーク用）

リクエスト ヘッダーとレスポンス ヘッダーには、一目ではわかりにくい重要な情報が含まれていることがよくあります。AI アシスタントによる説明を依頼します。 

Does this request have any notable headers?

特定のリクエストに時間がかかりすぎると感じながら、その理由がよくわからないことはありませんか？AI アシスタントによる調査を依頼します。

Why is this request taking so long?

AI アシスタントは、記録されたタイミングを調査し、問題がある場合は通知します。

… パフォーマンス

ウェブサイトの遅延の根本原因を見つけるのは難しい場合があります。パフォーマンス プロファイルのピークを超えられない場合は、AI 支援により、呼び出しツリーを簡素化できます。

Anything to improve in this call tree?

… は情報源を表します。

ウェブサイトで使用されるコードをすべて自分で作成することはほとんどありません。特定のリソースが読み込まれる理由や、そのリソースが何に使用されているのかわからない場合は、AI 支援は、次のような場合に役立ちます。

What is this file used for?

分析スクリプト、ソーシャル ウィジェット、A/B テスト ライブラリなど、AI アシスタントが詳しく調査して見つけ出します。