Esikatsele paikallista sovellustasi

Sisäänrakennetun Browserin yleisin käyttö on sovelluksen esikatselu sen ollessa käynnissä paikallisesti. Näin pääset tyhjästä käynnissä olevaan sovellukseen työtilassasi.

Vaiheittainen käyttöönotto

Vaihe 1: Käynnistä kehityspalvelin Terminalissa.

Avaa Terminal 1DevToolissa ja käynnistä kehityspalvelimesi. Komento riippuu teknologiapinostasi:

• React / Next.js / Vite: npm run dev
• Django: python manage.py runserver
• Rails: rails server
• Rust (web-kehyksellä): cargo run
• Go: go run main.go

Odota, kunnes palvelin tulostaa paikallisen URL-osoitteensa — yleensä jotain kuten http://localhost:3000, http://localhost:8000 tai http://localhost:8080.

Vaihe 2: Avaa Browser-paneeli.

Napsauta Browser-kuvaketta paneelin työkalupalkissa tai avaa se Lisää paneeli -valikosta. Browser-paneeli ilmestyy tyhjän osoitepalkin kanssa.

Vaihe 3: Siirry paikalliseen URL-osoitteeseesi.

Napsauta osoitepalkkia, kirjoita URL-osoite, jossa kehityspalvelimesi käy (esim. http://localhost:3000), ja paina Enter. Sovelluksesi latautuu paneeliin.

Vaihe 4: Lataa uudelleen tarvittaessa.

Paina Cmd+R (macOS) tai Ctrl+R (Windows/Linux) ladataksesi sivun uudelleen. Jos kehityspalvelimesi tukee hot module replacement -toimintoa (HMR) — kuten Vite tai Next.js — sivu päivittyy automaattisesti tiedostojen muuttuessa ilman manuaalista päivitystä.

Vaihe 5: Muuta kokoa asettelujen testaamiseksi.

Vedä paneelin jakajaa tehdäksesi Browser-paneelista kapeamman tai leveämmän. Tämä on nopea tapa nähdä, miltä sovelluksesi näyttää eri leveyksissä ilman erillisen responsiivisen testaustyökalun käyttöönottoa.

Testaa responsiiviset asettelut

Vedä paneelin jakajaa tehdäksesi Browserista kapean ja tarkistaaksesi mobiiliasettelun. Tarkempaa responsiivista testausta varten 1DevTool sisältää Mobiilisimulaattorin: napsauta puhelinkuvaketta Browser-paneelin otsikossa esikatsellaksesi sovellustasi vakiomobiilipisteissä (375 pikseliä iPhonelle, 768 pikseliä tabletille jne.).

Mobiilisimulaattori mahdollistaa myös laitteen suunnan vaihtamisen pysty- ja vaakasuunnan välillä, jotta voit varmistaa, että asettelusi toimii molemmissa tiloissa ilman fyysistä laitetta.

Käyttö AI Agentin kanssa

Sisäänrakennettu Browser loistaa todella AI Agenttien kanssa työskenneltäessä. Tässä työnkulku, joka eliminoi lähes kaikki kontekstinvaihdot:

1. Avaa Claude Code Terminal ja anna sille tehtävä: "Rakenna kirjautumissivu lomakkeella, joka validoi sähköposti- ja salasanakentät."
2. Seuraa Terminalia kun Claude kirjoittaa koodia.
3. Kun Claude ilmoittaa olevansa valmis, paina Cmd+R Browser-paneelissa ladataksesi uudelleen.
4. Kirjautumissivu ilmestyy paneeliin. Jos jokin näyttää väärältä, kuvaile se Claudelle vaihtamatta sovelluksia: "Lähetä-painike on liian lähellä salasanakenttää, lisää enemmän väliä."
5. Claude korjaa sen. Lataa uudelleen. Toista.

Tämä silmukka — koodi Terminalissa, vahvistus Browserissa, korjausten kuvailu — on paljon nopeampi kuin vaihtaminen Terminal-ikkunan, koodieditorin ja selaimen välilehden välillä.

Vinkki: Sijoita Browser-paneeli ja Terminal vierekkäin, jotta voit seurata Agentin työskentelyä ja nähdä tulokset yhdellä silmäyksellä. Hot reload -projektien kanssa sinun ei tarvitse edes painaa päivitystä.