Troubleshooting: Browser

embedded browser پینل کے عام مسائل ٹھیک کریں۔

Localhost App Load نہیں ہوتی

علامت: آپ browser پینل میں http://localhost:3000 navigate کرتے ہیں لیکن connection error یا blank page نظر آتا ہے۔

حل:

  • یقینی بنائیں کہ آپ کا dev سرور چل رہا ہے۔ Terminal چیک کریں — startup message تلاش کریں (مثال کے طور پر، Next.js سے ready on http://localhost:3000، یا Vite سے Local: http://localhost:5173/)۔ اگر سرور نہیں چل رہا، تو اپنے usual command سے شروع کریں (npm run dev، yarn dev، وغیرہ)۔
  • localhost کی بجائے 127.0.0.1 آزمائیں۔ کچھ systems localhost کو مختلف طریقے سے resolve کرتے ہیں۔ URL bar میں localhost کو 127.0.0.1 سے replace کریں — مثال کے طور پر، http://127.0.0.1:3000۔
  • Content-Security-Policy headers۔ اگر آپ کی app strict CSP headers سیٹ کرتی ہے جو webview میں embedding کو روکتی ہے، تو browser پینل اسے display کرنے سے انکار کرے گا۔ development mode میں، آپ یہ headers relax کر سکتے ہیں۔ مثال کے طور پر، Next.js میں آپ صرف local dev کے لیے اپنی next.config.js میں frame-ancestors directive remove یا کم سخت کر سکتے ہیں۔

Browser Panel Height Collapse ہو جاتی ہے

علامت: browser پینل ایک thin strip تک سکڑ جاتا ہے اور آپ اپنی app نہیں دیکھ سکتے۔

حل: browser کو زیادہ vertical space دینے کے لیے panel divider (browser پینل اور اس کے اوپر یا نیچے کے پینل کے درمیان پتلی bar) drag کریں اور اوپر کی طرف کھینچیں۔

اگر آپ چاہتے ہیں کہ browser زیادہ سے زیادہ جگہ لے، تو fullscreen mode استعمال کریں: browser پینل کو window بھرنے کے لیے expand کرنے کو Cmd+Shift+F (یا Windows/Linux پر Ctrl+Shift+F) دبائیں۔ normal layout پر واپس جانے کے لیے وہی shortcut دبائیں۔

Video یا Audio نہیں چل رہا

embedded browser پینل تمام media codecs سپورٹ نہیں کرتا۔ کچھ video formats یا audio streams پینل کے اندر چلنے میں ناکام ہو سکتے ہیں۔

حل: browser پینل میں کہیں بھی right-click کریں اور Open in External Browser منتخب کریں۔ یہ current URL کو آپ کے system کے default browser (Safari، Chrome، Firefox، وغیرہ) میں کھولتا ہے جس میں full codec support ہے۔ media-heavy pages، video players، یا کسی بھی چیز کے لیے جسے browser plugins کی ضرورت ہو یہ استعمال کریں۔

Page Blank / White Screen دکھاتا ہے

blank white screen عموماً مطلب ہے page load ہوئی لیکن JavaScript میں کچھ غلط ہو گیا اس سے پہلے کہ کوئی content display ہو سکے۔

حل:

  1. browser پینل toolbar میں DevTools بٹن کلک کریں (wrench یا </> آئیکن)۔
  2. Console ٹیب کھولیں۔
  3. لال error messages تلاش کریں۔

local development کے لیے سب سے عام وجہ CORS error ہے — آپ کا frontend ایک local API کو request کر رہا ہے، اور API اسے reject کر رہا ہے کیونکہ request localhost کی بجائے webview origin سے آ رہی ہے۔ development میں اسے ٹھیک کرنے کے لیے، اپنے API سرور کو تمام 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 کرنا یاد رکھیں۔