verifying-in-browser

ブラウザーで検証する

コードを変更した後は、このスキルを積極的に使って、アプリが実際に動作することを検証してください。コードが正しいと決めつけず、アプリを起動して確認してください。

手順

1. 開発サーバーをバックグラウンドで起動する — ターミナルの一覧を確認して、すでに起動しているか調べます。起動していない場合は、次のコマンドを実行します。

   npm run dev
   

   block_until_ms: 0 を設定して、バックグラウンドで実行します。その後、ローカルホストの URL を含む「ready」メッセージが表示されるまで確認します。

2. サイドブラウザーで開く — コードの横でアプリを起動します。

   Tool: browser_navigate
   Arguments: { "url": "http://localhost:3000", "position": "side", "take_screenshot_afterwards": true }
   

3. 簡易ヘルスチェック — 次の3項目を確認します。

   コンソールエラー：

   Tool: browser_console_messages
   

   エラーがあれば記録します。非推奨に関する警告は記録してもかまいませんが、ブロッカーではありません。

   ネットワークエラー：

   Tool: browser_network_requests
   

   4xx／5xx のレスポンス、失敗したフェッチ、CORS エラーがあれば記録します。

   表示の確認： スクリーンショットを確認します。ページは正しく表示されていますか？ レイアウトは正しいですか？ 画面が真っ白になったり、読み込みスピナーが消えずに残ったりしていませんか？

4. 変更したページに移動する — 変更が特定のルートに関するものであれば、そのページに移動して同じ確認を繰り返します。

5. 操作をテストする — フォーム、ボタン、またはインタラクティブ要素を変更した場合：

   • browser_snapshot を取得して要素の参照を確認します
   • 変更した要素をクリック、入力、またはホバーします
   • もう一度スクリーンショットを撮り、結果を確認します

6. 結果を報告する — ユーザーに次のいずれかを伝えます。

   • 「ブラウザーで検証済み — ページは正しく表示され、コンソールエラーはなく、すべてのネットワークリクエストは正常です。」
   • または「問題が見つかりました：[問題の一覧]」

使用するタイミング

• React コンポーネント、CSS、またはレイアウトのコードを変更した後
• API ルートやデータ取得を変更した後
• 環境変数や設定を更新した後
• 依存関係をインストールまたは削除した後
• コミット前 — 最終確認として

メモ

• position: "side" を使うと、コードとブラウザーを同時に確認できます。
• 開発サーバーがすでに起動している場合は、手順1を省略してそのまま移動します。
• SSR アプリでは、初回のサーバーレンダリング済み HTML と、クライアントでハイドレーションされた状態の両方を確認します。