トラブルシューティング：ブラウザ

組み込みブラウザパネルの一般的な問題を修正。

ローカルアプリが読み込まれない

症状： ブラウザパネルでhttp://localhost:3000に移動するが、接続エラーまたは空白のページが表示される。

修正：

devサーバーが実際に実行されていることを確認。 ターミナルをチェック — 起動メッセージを探す（例えばNext.jsのready on http://localhost:3000、またはViteのLocal: http://localhost:5173/）。サーバーが実行されていない場合、通常のコマンド（npm run dev、yarn devなど）で起動。
localhostの代わりに127.0.0.1を試す。 一部のシステムはlocalhostを期待と異なる方法で解決します。URLバーでlocalhostを127.0.0.1に置き換える — 例えばhttp://127.0.0.1:3000。
Content-Security-Policyヘッダー。 アプリがwebviewでの埋め込みを防ぐ厳格なCSPヘッダーを設定している場合、ブラウザパネルは表示を拒否します。開発モードでは、これらのヘッダーを緩和できます。例えば、Next.jsではローカル開発のみのためにnext.config.jsのframe-ancestorsディレクティブを削除または緩和。

ブラウザパネルの高さが崩壊

症状： ブラウザパネルが細いストリップに縮小し、アプリが見えない。

修正： パネル仕切り（ブラウザパネルとその上または下のパネルの間の細いバー）をドラッグしてブラウザのサイズを変更。上にドラッグしてブラウザにより多くの垂直スペースを与える。

ブラウザに可能な限り多くのスペースを確保したい場合、フルスクリーンモードを使用：Cmd+Shift+F（またはWindows/LinuxでCtrl+Shift+F）を押してブラウザパネルをウィンドウいっぱいに拡張。同じショートカットを押して通常のレイアウトに戻る。

ビデオまたはオーディオが再生されない

組み込みブラウザパネルはすべてのメディアコーデックをサポートしていません。特定のビデオ形式またはオーディオストリームはパネル内で再生に失敗する場合があります。

修正： ブラウザパネル内を任意の場所で右クリックし、外部ブラウザで開くを選択。これにより、現在のURLがシステムのデフォルトブラウザ（Safari、Chrome、Firefoxなど）で開かれ、フルコーデックサポートがあります。メディア主体のページ、ビデオプレーヤー、またはブラウザプラグインが必要なものに使用。

ページが空白/白い画面を表示

空白の白い画面は通常、ページは読み込まれたが、コンテンツが表示される前にJavaScriptで何かがうまくいかなかったことを意味します。

修正：

ブラウザパネルツールバーのDevToolsボタン（レンチまたは</>アイコン）をクリック。
Consoleタブを開く。
赤いエラーメッセージを探す。

ローカル開発で最も一般的な原因はCORSエラー — フロントエンドがローカルAPIにリクエストを行っており、APIがlocalhostではなくwebviewオリジンからのリクエストを拒否している。開発中にこれを修正するには、APIサーバーがすべてのオリジンを許可するように設定：

Express / Node： corsパッケージでapp.use(cors())を追加。
FastAPI： 開発用にallow_origins=["*"]付きのCORSMiddlewareを追加。
Next.js APIルート： ルートハンドラーのレスポンスヘッダーにAccess-Control-Allow-Origin: *を追加。

本番環境にデプロイする前にオリジンを再度制限することを忘れないでください。