Embedded Browser — جائزہ

embedded browser ایک مکمل Chromium webview ہے جو 1DevTool میں dockable پینل کے طور پر built in ہے۔ آپ کسی Terminal میں اپنا development سرور چلا سکتے ہیں اور browser پینل میں اپنی app دیکھ سکتے ہیں — دونوں ایک ساتھ ظاہر، ایک ہی window میں۔ اپنے Terminal اور Chrome کے درمیان Alt-Tab یا Cmd-Tab کی ضرورت نہیں۔

یہ کیوں اہم ہے

embedded browser کے بغیر مخصوص development loop کچھ یوں نظر آتا ہے: code edit کریں، Terminal پر switch کریں، سرور چلائیں، Chrome پر switch کریں، page reload کریں، کوئی چیز ٹوٹی نظر آئے، Terminal پر واپس switch کریں، اور دہرائیں۔ ہر context switch وقت لیتا ہے اور آپ کا focus توڑتا ہے۔

embedded browser پینل کے ساتھ، loop یہ بن جاتا ہے: code edit کریں، Terminal دیکھیں، browser پینل پر نظر ڈالیں۔ سب کچھ ایک ساتھ نظر آتا ہے۔ جب AI agent آپ کے لیے کوئی feature بنا رہا ہو، تو آپ Terminal میں اسے code کرتے دیکھ سکتے ہیں اور browser پینل میں نتیجہ ظاہر ہوتے دیکھ سکتے ہیں اپنے keyboard کو touch کیے بغیر۔

Embedded Browser کیا سپورٹ کرتا ہے

browser پینل ایک real Chromium engine استعمال کرتا ہے، اس لیے یہ بالکل Chrome کی طرح behave کرتا ہے:

• JavaScript — مکمل طور پر چلتا ہے، بشمول جدید ES2020+ features
• Local storage اور cookies — page loads کے درمیان persist ہوتے ہیں، اس لیے login sessions اور preferences کام کرتی ہیں
• WebSockets — live-reload اور hot module replacement (HMR) Vite اور Next.js جیسے dev سرورز کے ساتھ توقع کے مطابق کام کرتے ہیں
• CSS اور animations — سب کچھ بالکل ویسے render ہوتا ہے جیسے browser میں ہوتا

یہ ایک simplified preview engine نہیں ہے۔ اگر آپ کی app Chrome میں کام کرتی ہے، تو یہ embedded browser پینل میں بھی کام کرتی ہے۔

Browser پینل کیسے کھولیں

کسی بھی پینل area کے اوپر panel toolbar میں Browser آئیکن کلک کریں۔ browser پینل کھلتا ہے اور اوپر address bar دکھاتا ہے۔ navigate کرنے کے لیے URL ٹائپ کریں اور Enter دبائیں۔

متبادل طور پر، اپنے workspace layout کے کسی بھی area میں browser شامل کرنے کے لیے Add Panel menu استعمال کریں۔

آپ کے Layout میں Positioning

browser پینل کو آپ کی workspace میں کہیں بھی رکھا جا سکتا ہے۔ عام layouts:

• Terminal کے ساتھ side by side — بائیں طرف Terminal، دائیں طرف browser۔ real time میں AI agent کو UI بناتے دیکھنے کے لیے۔
• Bottom پینل — آپ کے terminals کے نیچے browser۔ editor اور Terminal کو زیادہ vertical space دیتا ہے جبکہ browser accessible رہتا ہے۔
• Floating پینل — browser پینل drag کریں اسے اپنے workspace پر ایک الگ overlay کے طور پر float کرنے کے لیے۔

panels کے درمیان divider drag کر کے کوئی بھی پینل resize کریں۔ پڑھنے کے لیے browser چوڑا کریں، یا responsive behavior جلدی چیک کرنے کے لیے تنگ کریں۔