Sisäänrakennettu Browser — Yleiskatsaus

Sisäänrakennettu Browser on täysi Chromium-webview, joka on integroitu 1DevTooliin telakoitavana paneelina. Voit ajaa kehityspalvelintasi Terminalissa ja nähdä sovelluksesi Browser-paneelissa — molemmat näkyvissä samaan aikaan, samassa ikkunassa. Ei enää Alt-Tab tai Cmd-Tab Terminalin ja Chromen välillä.

Miksi se on tärkeää

Tyypillinen kehityssilmukka ilman sisäänrakennettua Browseria näyttää tältä: muokkaa koodia, vaihda Terminaliin, käynnistä palvelin, vaihda Chromeen, lataa sivu uudelleen, huomaa jotain rikki, vaihda takaisin Terminaliin ja toista. Jokainen kontekstin vaihto maksaa aikaa ja rikkoo keskittymisen.

Sisäänrakennetun Browser-paneelin myötä silmukka muuttuu: muokkaa koodia, seuraa Terminalia, vilkaise Browser-paneeliin. Kaikki on näkyvissä kerralla. Kun AI Agent rakentaa sinulle ominaisuutta, voit seurata sen koodausta Terminalissa ja nähdä tuloksen ilmestyvän Browser-paneeliin koskematta näppäimistöön.

Mitä sisäänrakennettu Browser tukee

Browser-paneeli käyttää oikeaa Chromium-moottoria, joten se toimii täsmälleen kuten Chrome:

• JavaScript — suoritetaan täysin, mukaan lukien modernit ES2020+-ominaisuudet
• Local storage ja cookies — säilyvät sivulatauksien välillä, joten kirjautumissessiot ja asetukset toimivat
• WebSockets — live-reload ja hot module replacement (HMR) toimivat odotetusti kehityspalvelimien kuten Vite ja Next.js kanssa
• CSS ja animaatiot — renderöi kaiken täsmälleen kuten selain tekisi

Tämä ei ole yksinkertaistettu esikatselu-moottori. Jos sovelluksesi toimii Chromessa, se toimii sisäänrakennetussa Browser-paneelissa.

Browser-paneelin avaaminen

Napsauta Browser-kuvaketta paneelin työkalupalkissa minkä tahansa paneelialueen yläosassa. Browser-paneeli avautuu ja näyttää osoitepalkin yläosassa. Kirjoita URL ja paina Enter siirtyäksesi sivulle.

Vaihtoehtoisesti käytä Lisää paneeli -valikkoa lisätäksesi Browserin mihin tahansa kohtaan työtilaasetteluasi.

Sijoittaminen asetteluusi

Browser-paneeli voidaan sijoittaa mihin tahansa työtilassasi. Yleisiä asetteluja:

• Vierekkäin Terminalin kanssa — Terminal vasemmalla, Browser oikealla. Loistava AI Agentin reaaliaikaisen UI-rakentamisen seuraamiseen.
• Alapaneeli — Browser Terminaliesi alapuolella. Antaa enemmän pystysuuntaista tilaa editorille ja Terminalille pitäen Browserin kuitenkin saatavilla.
• Kelluvana paneelina — vedä Browser-paneeli irralliseksi kelluvaksi kerrokseksi työtilasi yläpuolelle.

Muuta minkä tahansa paneelin kokoa vetämällä jakajaa paneelien välillä. Tee Browserista leveä lukemista varten tai kapea responsiivisen käyttäytymisen pikaiseen tarkistamiseen.