Troubleshooting: Browser

Embedded browser panel के common issues fix करें।

Localhost App Load नहीं हो रहा

Symptom: browser panel में http://localhost:3000 navigate करते हैं पर connection error या blank page दिखती है।

Fixes:

  • Dev server actually चल रहा है verify करें। Terminal check करें — startup message देखें (जैसे Next.js का ready on http://localhost:3000, या Vite का Local: http://localhost:5173/)। Server नहीं चल रहा तो अपने usual command से start करें (npm run dev, yarn dev, आदि)।
  • localhost की बजाय 127.0.0.1 try करें। कुछ systems localhost को expected से अलग resolve करते हैं। URL bar में localhost को 127.0.0.1 से replace करें — जैसे http://127.0.0.1:3000।
  • Content-Security-Policy headers। App strict CSP headers set करे जो webview में embedding prevent करें तो browser panel display करने से refuse करेगा। Development mode में इन headers को relax करें। जैसे Next.js में local dev के लिए next.config.js में frame-ancestors directive remove या loosen करें।

Browser Panel Height Collapse हो जाती है

Symptom: browser panel thin strip में shrink हो जाती है और app नहीं दिखता।

Fix: panel divider (browser panel और उसके ऊपर या नीचे के panel के बीच की thin bar) drag करके browser resize करें। Click करके ऊपर drag करें browser को ज़्यादा vertical space देने के लिए।

Browser को ज़्यादा से ज़्यादा space देना हो तो fullscreen mode use करें: Cmd+Shift+F (Windows/Linux पर Ctrl+Shift+F) दबाएं browser panel को window fill करने के लिए। Normal layout पर वापस आने के लिए वही shortcut।

Video या Audio नहीं चल रहा

Embedded browser panel सभी media codecs support नहीं करता। कुछ video formats या audio streams panel के अंदर play नहीं हो सकते।

Fix: browser panel में कहीं भी right-click करें और Open in External Browser चुनें। Current URL system के default browser (Safari, Chrome, Firefox, आदि) में खुलता है जिसमें full codec support है। Media-heavy pages, video players, या browser plugins की ज़रूरत वाली चीज़ों के लिए यह use करें।

Page Blank / White Screen दिखाती है

Blank white screen का मतलब आमतौर पर है page load हुई पर JavaScript में कुछ गलत हो गया।

Fix:

  1. Browser panel toolbar में DevTools button click करें।
  2. Console tab खोलें।
  3. Red error messages देखें।

Local development के लिए सबसे common cause CORS error है — frontend local API पर request कर रहा है, और API इसे reject कर रही है क्योंकि request localhost की बजाय webview origin से आ रही है। Development में fix करने के लिए API server को सभी origins allow करने के लिए configure करें:

  • Express / Node: cors package के साथ app.use(cors()) जोड़ें।
  • FastAPI: dev के लिए allow_origins=["*"] के साथ CORSMiddleware जोड़ें।
  • Next.js API routes: route handler में response headers में Access-Control-Allow-Origin: * जोड़ें।

Production पर deploy करने से पहले origins restrict करना याद रखें।