DevTools

組み込みブラウザは、通常のChromeウィンドウで使用するのと同じインスペクター、コンソール、ネットワークモニターを含む完全なChrome DevToolsへのアクセスを提供します。AIエージェントが構築したものをデバッグしたり、JavaScriptエラーを確認したり、リクエストがどのように形成されているかを検査したりするのに使用します。

DevToolsを開く

ブラウザパネルのヘッダーにあるDevToolsボタン（🔧）をクリックします。Chrome DevToolsがワークスペースとは別のウィンドウで開きます。このウィンドウは便利な場所に配置できます — 多くの開発者はセカンドモニターに配置するか、ブラウザパネルの下にドックします。

Chromeで行うのと同じ方法でDevToolsを開くこともできます：ブラウザパネル内のページの任意の場所を右クリックし、検証を選択します。DevToolsが、右クリックした要素にフォーカスしたElementsタブで開きます。

利用可能な機能

完全なDevToolsツールセットが利用可能です：

• Elements — ページ上の任意の要素のHTMLとCSSを検査・修正。ツリー内の要素をクリックするとブラウザ内でハイライトされ、ページ上の要素をクリックするとツリー内で見つかります。ソースファイルに触れることなく変更を試すために、スタイルをインラインで編集できます。
• Console — console.logの出力、JavaScriptエラー、警告を表示。JavaScript式をコンソールで直接実行して、ファイルを編集せずにテストできます。
• Network — アプリが発行するすべてのHTTPリクエストを監視。リクエストヘッダー、レスポンスボディ、タイミング、ステータスコードを確認できます。API呼び出しが正しく送信されているか、レスポンスが正しいかを確認するのに役立ちます。
• Sources — ブレークポイントを使用してJavaScriptをステップ実行。ブレークポイントを設定し、ブラウザでアクションをトリガーすると、実行が一時停止して変数の値を検査できます。
• Application — ローカルストレージ、セッションストレージ、Cookie、IndexedDBを検査。認証状態やブラウザに保存されているものをデバッグするのに役立ちます。

一般的なデバッグシナリオ

AIエージェントが構築したものを確認： Elementsパネルを開き、HTML構造を探索します。エージェントが正しく配線したかどうか — 正しいクラス名、適切なネスト、正しい属性 — がわかります。

JavaScriptエラーの特定： ページを読み込む前にConsoleを開きます。キャッチされないエラーがファイル名と行番号とともにここに表示されます。AIエージェントにエラーメッセージを共有して、根本原因を修正してもらいましょう。

API呼び出しのデバッグ： Networkタブを開き、アプリ内でリクエストをトリガーするアクション（ログインボタンのクリックなど）をクリックします。リクエストがリストに表示されます。クリックして完全なリクエストとレスポンスを確認 — 認証問題や不正なリクエストボディの診断に役立ちます。

ヒント： AIエージェントが変更を加えている間、Consoleタブを開いたままにしておきましょう。ページ上で見える前にエラーがここに表示されるので、何を修正する必要があるかを早期にフィードバックできます。