Local App Preview करें

Embedded browser का सबसे common use locally चल रहे app को preview करना है। यहां बताया है कि कुछ नहीं से workspace में visible running app तक कैसे पहुंचें।

Step-by-Step Setup

Step 1: Terminal में dev server शुरू करें।

1DevTool में terminal खोलें और development server शुरू करें। Command tech stack पर depend करती है:

• 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

Server अपना local URL output करे तक इंतज़ार करें — आमतौर पर http://localhost:3000, http://localhost:8000, या http://localhost:8080।

Step 2: Browser panel खोलें।

Panel toolbar में Browser icon click करें, या Add Panel menu से खोलें। Browser panel empty address bar के साथ दिखता है।

Step 3: Local URL पर navigate करें।

Address bar click करें, dev server जिस URL पर चल रहा है वो type करें (जैसे http://localhost:3000), और Enter दबाएं। App panel में load होता है।

Step 4: ज़रूरत पड़ने पर Refresh करें।

Cmd+R (macOS) या Ctrl+R (Windows/Linux) दबाएं page reload करने के लिए। Dev server hot module replacement (HMR) support करता हो — जैसे Vite या Next.js — तो files change होने पर page automatically update होता है, manual refresh की ज़रूरत नहीं।

Step 5: Layouts test करने के लिए Resize करें।

Panel divider drag करके browser panel को narrower या wider बनाएं। App अलग widths पर कैसा दिखता है जल्दी देखने का तरीका।

Responsive Layouts Test करना

Panel divider drag करके browser narrow बनाएं और mobile layout check करें। ज़्यादा precise responsive testing के लिए 1DevTool में Mobile Simulator है: browser panel header में phone icon click करके standard mobile breakpoints पर app preview करें (iPhone के लिए 375px, tablet के लिए 768px, आदि)।

Mobile Simulator device orientation portrait और landscape के बीच toggle करने देता है, ताकि बिना physical device के दोनों modes में layout verify हो।

AI Agents के साथ Use करें

Embedded browser AI agents के साथ काम करते वक्त सच में shine करता है। एक 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 done report करे तो browser panel में Cmd+R दबाएं।
4. Login page panel में दिखती है। कुछ गलत लगे तो apps switch किए बिना Claude को describe करें: "The submit button is too close to the password field, add more spacing."
5. Claude fix करता है। Reload करें। Repeat।

यह loop — terminal में code, browser में verify, fixes describe करें — windows switch करने से बहुत तेज़ है।

Tip: Browser panel और terminal side by side रखें ताकि agent को काम करते देख सकें और results एक नज़र में। Hot reload वाले projects में refresh भी नहीं दबाना होगा।