اپنی Local App Preview کریں

embedded browser کا سب سے عام استعمال locally چلتی app preview کرنا ہے۔ یہاں بتایا گیا ہے کہ کچھ نہ ہونے سے اپنی workspace میں نظر آتی running app تک کیسے جائیں۔

مرحلہ بہ مرحلہ Setup

مرحلہ 1: Terminal میں اپنا dev سرور شروع کریں۔

1DevTool میں Terminal کھولیں اور اپنا development سرور شروع کریں۔ command آپ کی tech stack پر منحصر ہے:

• React / Next.js / Vite: npm run dev
• Django: python manage.py runserver
• Rails: rails server
• Rust (web framework کے ساتھ): cargo run
• Go: go run main.go

سرور کے اپنی local URL output کرنے کا انتظار کریں — عموماً http://localhost:3000، http://localhost:8000، یا http://localhost:8080 جیسی کوئی چیز۔

مرحلہ 2: Browser پینل کھولیں۔

panel toolbar میں Browser آئیکن کلک کریں، یا Add Panel menu سے کھولیں۔ browser پینل ایک خالی address bar کے ساتھ ظاہر ہوتا ہے۔

مرحلہ 3: اپنی local URL پر navigate کریں۔

address bar کلک کریں، وہ URL ٹائپ کریں جس پر آپ کا dev سرور چل رہا ہے (مثلاً http://localhost:3000)، اور Enter دبائیں۔ آپ کی app پینل میں load ہوتی ہے۔

مرحلہ 4: ضرورت پڑنے پر Refresh کریں۔

page reload کرنے کے لیے Cmd+R (macOS) یا Ctrl+R (Windows/Linux) دبائیں۔ اگر آپ کا dev سرور hot module replacement (HMR) سپورٹ کرتا ہے — جیسے Vite یا Next.js — تو files تبدیل ہونے پر page خودکار طریقے سے update ہوتا ہے، کوئی manual refresh نہیں چاہیے۔

مرحلہ 5: Layouts test کرنے کے لیے Resize کریں۔

browser پینل کو تنگ یا چوڑا کرنے کے لیے panel divider drag کریں۔ یہ الگ responsive testing ٹول set up کیے بغیر مختلف widths پر آپ کی app کا جائزہ لینے کا ایک فوری طریقہ ہے۔

Responsive Layouts Test کریں

browser کو تنگ کرنے اور موبائل layout چیک کرنے کے لیے panel divider drag کریں۔ زیادہ precise responsive testing کے لیے، 1DevTool ایک Mobile Simulator شامل ہے: معیاری mobile breakpoints (375px iPhone کے لیے، 768px tablet کے لیے) پر اپنی app preview کرنے کے لیے browser پینل header میں phone آئیکن کلک کریں۔

Mobile Simulator آپ کو portrait اور landscape کے درمیان device orientation toggle کرنے کی بھی سہولت دیتا ہے، تاکہ آپ physical device کے بغیر verify کر سکیں کہ آپ کا layout دونوں modes میں کام کرتا ہے۔

AI Agents کے ساتھ استعمال

embedded browser واقعی چمکتا ہے جب AI agents کے ساتھ کام کر رہے ہوں۔ یہاں ایک workflow ہے جو تقریباً تمام context switching ختم کر دیتا ہے:

1. Claude Code terminal کھولیں اور اسے ایک task دیں: "Build the login page with a form that validates the email and password fields."
2. Terminal میں Claude کو code لکھتے ہوئے دیکھیں۔
3. جب Claude report کرے کہ مکمل ہو گیا، browser پینل میں Cmd+R دبائیں reload کرنے کے لیے۔
4. login page پینل میں ظاہر ہوتا ہے۔ اگر کچھ غلط لگے، تو Claude کو apps switch کیے بغیر بتائیں: "The submit button is too close to the password field, add more spacing."
5. Claude ٹھیک کرتا ہے۔ Reload کریں۔ دہرائیں۔

یہ loop — Terminal میں code، browser میں verify، fixes بیان کریں — terminal window، code editor، اور browser tab کے درمیان switching سے بہت تیز ہے۔

ٹپ: browser پینل اور Terminal کو side by side position کریں تاکہ آپ agent کو کام کرتے دیکھ سکیں اور نتائج ایک نظر میں دیکھ سکیں۔ hot reload والے projects کے لیے، آپ کو refresh بھی دبانا نہیں پڑے گا۔