Embedded Browser — Overview

1DevTool के अंदर running app preview करें — Chrome पर switch करने की ज़रूरत नहीं।

Embedded browser एक full Chromium webview है जो 1DevTool में dockable panel के रूप में built है। Terminal में development server चला सकते हैं और browser panel में app देख सकते हैं — दोनों एक साथ visible, एक ही window में। Alt-Tab या Cmd-Tab की ज़रूरत नहीं terminal और Chrome के बीच।

क्यों Matter करता है

Embedded browser के बिना typical development loop: code edit करो, terminal पर switch करो, server चलाओ, Chrome पर switch करो, page reload करो, कुछ टूटा देखो, terminal पर वापस switch करो, repeat। हर context switch समय और focus दोनों लेता है।

Embedded browser panel से loop बन जाता है: code edit करो, terminal देखो, browser panel पर नज़र डालो। सब एक साथ visible। AI agent feature build कर रहा हो तो terminal में code होते देख सकते हैं और browser panel में result appear होते — keyboard छुए बिना।

Embedded Browser क्या Support करता है

Browser panel real Chromium engine use करता है, इसलिए बिल्कुल Chrome जैसा behave करता है:

  • JavaScript — fully चलता है, modern ES2020+ features सहित
  • Local storage और cookies — page loads के बीच persist होता है, login sessions और preferences काम करती हैं
  • WebSockets — live-reload और hot module replacement (HMR) Vite और Next.js जैसे dev servers के साथ as expected काम करता है
  • CSS और animations — सब exactly browser की तरह render होता है

यह simplified preview engine नहीं है। App Chrome में काम करे तो embedded browser panel में भी काम करेगा।

Browser Panel कैसे खोलें

किसी भी panel area के ऊपर panel toolbar में Browser icon click करें। Browser panel ऊपर address bar के साथ खुलता है। URL type करें और Enter दबाएं navigate करने के लिए।

Alternatively, Add Panel menu से browser को workspace layout के किसी भी area में जोड़ें।

Embedded browser panel

Layout में Positioning

Browser panel workspace में कहीं भी रखा जा सकता है। Common layouts:

  • Terminal के साथ side by side — left पर terminal, right पर browser। AI agent को real time में UI build करते देखने के लिए।
  • Bottom panel — terminals के नीचे browser। Editor और terminal को ज़्यादा vertical space देता है जबकि browser accessible रहता है।
  • Floating panel — browser panel को drag करें workspace के ऊपर separate overlay के रूप में float करने के लिए।

Panels के बीच divider drag करके किसी भी panel को resize करें। Browser को पढ़ने के लिए wide बनाएं, या quickly responsive behavior check करने के लिए narrow।